20行js代码制作网页刮刮乐

最新推荐文章于 2021-03-10 00:54:32 发布

会做饭的技术男

最新推荐文章于 2021-03-10 00:54:32 发布

阅读量493

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hji0bb1ijbaa&title=20%E8%A1%8Cjs%E4%BB%A3%E7%A0%81%E5%88%B6%E4%BD%9C%E7%BD%91%E9%A1%B5%E5%88%AE%E5%88%AE%E4%B9%90

版权

前端专栏收录该内容

2507 篇文章 13 订阅

订阅专栏

分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码
效果如下

盖伦.jpg

刮刮乐.gif

HTML部分

<body>
        ![](img/gailun.jpg)
        <canvas id="canvas" width="400" height="300"></canvas> </body>

没什么要特别注意的
为了效果加了些CSS样式

CSS部分

<style type="text/css"> *{ margin: 0; padding: 0; } img{ width: 400px; height: 300px; left: 200px; position: absolute; z-index: -1; } canvas{ margin-left:200px; } </style>

注意

1.为了清除浏览器自带效果加了
*{
            margin: 0;
            padding: 0; }
2.img需要在灰布下面,加了z-index;
3.图片绝对定位

js部分
分析下逻辑

1.鼠标按下移动相应区域刮开
2.鼠标抬起改变鼠标位置不接着刮开

js代码

    <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); //画蒙布 context.beginPath(); context.fillStyle= 'grey' context.fillRect(0,0,400,300); //鼠标按下开刮 canvas.onmousedown=function(){ canvas.onmousemove = function(){ //获取鼠标坐标 var x = event.clientX; var y = event.clientY; //destination-out 显示原来的不在后来区域的部分 context.globalCompositeOperation = "destination-out"; context.beginPath(); context.arc(x-200,y,30,0,Math.PI*2); context.fill(); } } //鼠标抬起不刮开 canvas.onmouseup=function(){ canvas.onmousemove = function(){ } } </script>