美文网首页
js 刮刮乐

js 刮刮乐

作者: Erin_梦 | 来源:发表于2016-07-22 16:04 被阅读118次

网上无意间搜到了一个js刮刮乐效果,觉得很有趣,所以找来分析一下代码和效果,并根据自己理解精简了部分代码,分析不到位之处还请指教

(function(bodyStyle){

bodyStyle.mozUserSelect = 'none';           //这个功能设置为无法选择文本

bodyStyle.webkitUserSelect = 'none';

var img = new Image();

var canvas = document.querySelector('canvas');   //返回第一个canvas

canvas.style.position = 'absolute';       

img.addEventListener('load',function(e){    //给img绑定一个加载事件

var ctx;

var w = img.width, h = img.height;

var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop;

//获取canvas相对于img元素的边距

var mousedown = false;

function layer(ctx){    //构建遮盖层

ctx.fillStyle = 'gray';

ctx.fillRect(0, 0, w, h);    //自适应图片宽高

}

function eventDown(e){  //鼠标按下事件

e.preventDefault();    //阻止事件默认动作

mousedown=true;

}

function eventUp(e){  //鼠标抬起事件

e.preventDefault();

mousedown=false;

}

function eventMove(e){  //鼠标移动事件适用于web&wap端

e.preventDefault();

if(mousedown){

if(e.changedTouches){     //记录自移动以来发生改变的对象数组,定位到最后一次改变

e=e.changedTouches[e.changedTouches.length-1];

}

var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,

y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;

//获取触摸的坐标

with(ctx){   //设定默认对象ctx,相当于圆形画笔

beginPath()

arc(x, y, 5, 0, Math.PI * 2);

fill();

}

}

}

canvas.width=w;   //设置画板的长宽,根据图片自适应

canvas.height=h;

canvas.style.backgroundImage='url('+img.src+')';   //获取画板的背景图

ctx=canvas.getContext('2d');

layer(ctx);   //调用灰色遮罩层

ctx.globalCompositeOperation = 'destination-out';   //将新图像绘制到已有图像上

canvas.addEventListener('touchstart', eventDown);

canvas.addEventListener('touchend', eventUp);

canvas.addEventListener('touchmove', eventMove);

canvas.addEventListener('mousedown', eventDown);

canvas.addEventListener('mouseup', eventUp);

canvas.addEventListener('mousemove', eventMove);

});

img.src = 'http://www.baidu.com/img/bdlogo.gif';

})(document.body.style);

思路分析:刮刮乐一共有三层,第一层是背景层,随便选一张图片即可;第二层是遮罩层,大小和位置自适应第一层背景图,用canvas画出,也就是globalCompositeOperation的概念里所说的目标图像;第三层是源图像,即canvas绘出的一个个圆。利用globalCompositeOperation中的destination-out属性,在源图像外显示目标图像(只有源图像外的目标图像部分会被显示,源图像是透明的。)目标图像是已经画在画布上的图像,即灰色遮罩,源图像通过鼠标的移动或者手指的触摸来放置到画布上。

废话了这么多其实关于刮刮乐我们需要掌握的知识点主要有两个:

1.js 的touch事件

2.canvas globalCompositeOperation 属性

最后我发现了刮刮乐一个bug。。当你点击鼠标快速移动的时候,放开鼠标之后不用点击都能刮刮乐,很神奇。。但由于技术渣,并不知道解决方法,虽然我觉得不会有人像我这样点击鼠标飞速移动哈哈。

相关文章

  • js 刮刮乐

    网上无意间搜到了一个js刮刮乐效果,觉得很有趣,所以找来分析一下代码和效果,并根据自己理解精简了部分代码,分析不到...

  • 刮刮乐

  • 刮刮乐

    2007年3月3日,特别的日子。 为啥特别? 第一次坐飞机,青岛飞西安,提前4个小时就到机场了,在网上研究过攻略,...

  • 刮刮乐

    2014年11月3日 刮刮乐 今天杏子又在济南火车站候车了,这次她是故地重游,明显轻松了许多。 ...

  • 刮刮乐

    设置刮开后,显示的文字Label UILabel *label = [[UILabel alloc]initWit...

  • 刮刮乐

    刮刮乐这个东西真的是越刮越快乐,尤其是他给我准备的30张,现在有些喜欢30这个数字了,哈哈哈哈哈! 他给我准备...

  • 刮刮乐

    最近幻想中奖挣大钱的两个人于今晚走进彩票店刮起了刮刮乐,五块钱一张,最后刮了六张,付了十块钱,而我依然是好运绝缘体...

  • 刮刮乐热潮

    近日中国福利彩票在县城体育馆做一个瓜瓜乐的活动,大体内容就是五块钱一张的刮刮乐有机会赢取三十万大奖。而更吸引人的是...

  • 刮刮乐效果

    实现原理: 利用layer的mask遮罩 + 贝塞尔曲线UIBezierPath 关键代码: 效果图:

  • canvas— —刮刮乐

    今天,结合上一篇文章的抽奖小游戏,用canvas来写一个小游戏——刮刮乐。首先,用canvas做一个画布,宽高各为...

网友评论

      本文标题:js 刮刮乐

      本文链接:https://www.haomeiwen.com/subject/gxibjttx.html