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 相关文章推荐
JQuery 风格的HTML文本转义
Jul 01 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
vue实现简单跑马灯效果
May 25 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
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
Terran剧情介绍
2020/03/14 星际争霸
PHP中的extract的作用分析
2008/04/09 PHP
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
开启PHP的伪静态模式
2015/12/31 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
Python实现建立SSH连接的方法
2015/06/03 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Python实战之制作天气查询软件
2019/05/14 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
三个Unix的命令面试题
2015/04/12 面试题
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
上课迟到检讨书
2014/02/19 职场文书
给校长的建议书400字
2014/05/15 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
父亲节活动策划方案
2014/08/24 职场文书
日元符号 ¥
2022/02/17 杂记