编程 Javascript

20行JS代码实现网页刮刮乐效果

Posted in Javascript onJune 23, 2017

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

效果如下

20行JS代码实现网页刮刮乐效果

盖伦.jpg

20行JS代码实现网页刮刮乐效果

刮刮乐.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>

需要注意的是

1.图片和画布左移了200px,所以圆的起点坐标相对于获取位置减了200px;

2.globalCompositeOperation是画布的一个功能作用是设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上,还有其余10种写法

以上这篇20行JS代码实现网页刮刮乐效果就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

20行JS代码实现网页刮刮乐效果

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript浏览器选项卡效果

Aug 25 Javascript

javascript 弹出的窗口返回值给父窗口具体实现

Nov 23 Javascript

jQuery获取(选中)单选,复选框,下拉框中的值

Feb 21 Javascript

js使用removeChild方法动态删除div元素

Aug 01 Javascript

jquery制作多功能轮播图插件

Apr 02 Javascript

JavaScript实现鼠标滑过处生成气泡的方法

May 16 Javascript

举例详解AngularJS中ngShow和ngHide的使用方法

Jun 19 Javascript

jQuery实现响应鼠标滚动的动感菜单效果

Sep 21 Javascript

js计算时间差代码【包括计算，天，时，分，秒】

Apr 26 Javascript

微信小程序与后台PHP交互的方法实例分析

Dec 10 Javascript

如何制作一个Node命令行图像识别工具

Dec 12 Javascript

基于js实现数组相邻元素上移下移

May 19 Javascript

w3c编程挑战_初级脚本算法实战篇

Jun 23 #Javascript

微信小程序获取二维码实例详解

Jun 23 #Javascript

详谈表单格式化插件jquery.serializeJSON

Jun 23 #jQuery

angularJs的ng-class切换class

Jun 23 #Javascript

关于使用js算总价的问题

Jun 23 #Javascript

angular select 默认值设置方法

Jun 23 #Javascript

获取当前按钮或者html的ID名称实例(推荐)

Jun 23 #Javascript