简单canvas刮刮乐

好久没玩canvas了，随便写点效果玩玩。要开始重新拾起这门牛x的技术了，工作中不一定能用得上，以后说不定就能发挥用处了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas{border: 1px solid #ccc;background: url(http://p0.so.qhmsg.com/t01bf9deea2f89683d5.jpg) center/cover no-repeat}
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script type="text/javascript">
        var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d');

        canvas.width = 500;
        canvas.height = 500;

        ctx.fillStyle = '#ccc';
        ctx.fillRect(0,0,canvas.width,canvas.height);

        ctx.globalCompositeOperation = 'destination-out';

        ctx.lineWidth = 50;

        canvas.onmousedown = function(e){
            ctx.beginPath();
            ctx.lineTo(e.pageX,e.pageY);

            canvas.onmousemove = function(e){
                ctx.lineTo(e.pageX,e.pageY);
                ctx.stroke();
            };

            canvas.onmouseup = function(){
                canvas.onmousemove = null;
            }
        };

    </script>
</body>
</html>

 

posted @ 2017-05-04 22:26  _Jo  阅读(169)  评论(0)    收藏  举报