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代码实现网页刮刮乐效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
Javascript继承机制详解
May 30 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
详解JSON.stringify()的5个秘密特性
May 26 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
You might like
php缓存技术介绍
2006/11/25 PHP
PHP include_path设置技巧分享
2011/07/03 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
解析vue中的$mount
2017/12/21 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
python绘制地震散点图
2019/06/18 Python
使用python模拟命令行终端的示例
2019/08/13 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL