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 相关文章推荐
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
JS通过位运算实现权限加解密
2018/08/14 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
便利店的创业计划书
2014/01/15 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers