canvas滤镜-刮刮乐

最新推荐文章于 2024-08-25 09:57:22 发布

Chandler1986

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量111

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jessical626/p/5978548.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="720" height="720">
            
        </canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext('2d');
            canvas.style.background = "url(img/song.jpg) no-repeat";
            ctx.fillStyle = "#999";
            ctx.globalCompositeOperation = 'destination-over';
            ctx.beginPath();
            ctx.fillRect(0,0,720,720);
            ctx.closePath();
            canvas.onmousemove = function(ev){
                var ev = ev||window.event;
                var x = ev.pageX-this.offsetLeft;
                var y = ev.pageY-this.offsetTop;
                ctx.fillStyle = "#000";
                ctx.beginPath();
                ctx.globalCompositeOperation = 'destination-out';
                ctx.arc(x,y,20,0,2*Math.PI,true);
                ctx.closePath();
                ctx.fill();
            }
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/jessical626/p/5978548.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Chandler1986

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas滤镜-刮刮乐

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="can...
复制链接

扫一扫