<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$Title$</title> </head> <body> <canvas id="canvas" width="240" height="240" style="background-image: url(烤箱.jpg)"></canvas> </body> <script src="jquery-2.1.4.js"></script> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //1、绘制一个铺满整个画布的矩形 ctx.fillStyle = "rgb(211,211,211)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.globalCompositeOperation = "destination-out"; //当用户点击了指定位置，并拖动才能实现刮的效果 $("canvas").on("mousedown", function () { $("canvas").on("mousemove", function (e) { //e.pageX,e.pageY：获取该点位于浏览器中的坐标 //1、计算该点位于canvas画布中的坐标 var x = e.pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop; ctx.beginPath(); ctx.arc(x, y, 20, 0, 2 * Math.PI); ctx.fill(); //2、判断当前刮出的像素点个数是否一斤达到画布的总像素点的一半 //判定该像素点被刮出的条件：rgba中a的值为0 //data是一个数组，保存了画布中每一个像素点的rgba的值 var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data; var number = 0; for (var i = 0; i < data.length; i += 4) { //判断该像素点的rgba中a的值是否为0，如果为0，表示该点被刮出 if (data[i + 3] == 0) { //表示该像素点被刮出 number++; } } //3、判断刮出的像素点的个数满足画布的一半，清空画布 if (number >= canvas.width * canvas.height / 2) { ctx.clearRect(0, 0, canvas.width, canvas.height); $("canvas").off("mousemove"); } }); }) .on("mouseup mouseleave", function () { $("canvas").off("mousemove"); }); </script> </html>
