念念不忘
必有回响

利用canvas画布实现刮刮乐抽奖效果

今天学了canvas画布,看到刮刮乐抽奖效果挺有意思的,鼠标涂抹底部照片会逐渐显示出来,参照案例顺便发出来回顾一下。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> canvas { border: 1px solid #000; background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556549627988&di=adc7b53102f637804b8d6e212451d12b&imgtype=0&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2F40e7c1ba8a3665587b5ef5391ada3375.jpeg) no-repeat; background-size:cover; } </style> </head> <body> <canvas width="600" height="400"></canvas> </body> <script type="text/javascript"> var canvas = document.querySelector('canvas') var ctx = canvas.getContext("2d"); //创建一个2d画布 // 创建一个img标签 var image = new Image() // 设置图片的路径 // image.src = 'images/baby1.jpg' ctx.fillStyle = "#ccc"; //设置灰色图罩层以及图罩层大小 ctx.fillRect(0, 0, canvas.width, canvas.height) // 鼠标按下,注册鼠标事件监听 canvas.onmousedown = function(){ canvas.onmousemove = function(e){ // 核心代码(掏空)透明,图像合成,最外层图像会被显示 ctx.globalCompositeOperation = 'destination-out' ctx.beginPath(); //设置鼠标涂抹区域半径为30px的一个圆形 ctx.arc(e.offsetX, e.offsetY, 30, 0, 6.28, false); ctx.fillStyle = '#000'; ctx.fill() } } // 鼠标抬起,取消鼠标移动事件 canvas.onmouseup = function(){ canvas.onmousemove = null; } </script> </html>

实现效果:点我就能看到哦

赞(2) 打赏
未经允许不得转载:小蚁上树 » 利用canvas画布实现刮刮乐抽奖效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏