canvas 刮刮乐 撕衣服 源代码

来源:互联网 发布:java工作流引擎jpbm 编辑:程序博客网 时间:2024/03/29 16:18



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<canvas id="canvas" width="240" height="240" style="background-imageurl(烤箱.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(00canvas.widthcanvas.height);

    ctx.beginPath();
    ctx.globalCompositeOperation "destination-out";

    //当用户点击了指定位置,并拖动才能实现刮的效果
    $("canvas").on("mousedown"function () {
                $("canvas").on("mousemove"function (e) {
                    //e.pageX,e.pageY:获取该点位于浏览器中的坐标

                    //1、计算该点位于canvas画布中的坐标
                    var e.pageX - canvas.offsetLeft;
                    var e.pageY - canvas.offsetTop;

                    ctx.beginPath();
                    ctx.arc(xy200Math.PI);
                    ctx.fill();

                    //2、判断当前刮出的像素点个数是否一斤达到画布的总像素点的一半
                    //判定该像素点被刮出的条件:rgbaa的值为0


                    //data是一个数组,保存了画布中每一个像素点的rgba的值
                    var data = ctx.getImageData(00canvas.widthcanvas.height).data;
                    var number 0;

                    for (var 0data.length+= 4) {
                        //判断该像素点的rgbaa的值是否为0,如果为0,表示该点被刮出
                       if (data[3== 0) {
                            //表示该像素点被刮出
                           number++;
                        }

                    }
                    //3、判断刮出的像素点的个数满足画布的一半,清空画布
                    if (number >= canvas.width * canvas.height 2) {
                        ctx.clearRect(00canvas.widthcanvas.height);
                        $("canvas").off("mousemove");
                    }
                });
            })
            .on("mouseup mouseleave"function () {
                $("canvas").off("mousemove");

            });
</script>
</html>

0 0
原创粉丝点击