用原生js实现刮奖效果

用原生js实现简单的刮奖效果
效果图

分析：这是运用canvas来做的，页面结构为一个canvas和一张图片。canvas在最上层，图片在最下层。canvas与图片宽高一致。首先在canvas上填充灰色并写上文字，将“画笔”的globalCompositeOperation属性设置为destination-out，（globalCompositeOperation属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上,destination-out属性值在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。）
最后设置鼠标事件，当鼠标按下时开始“画画”，当鼠标移动时，“画笔”跟随鼠标移动，当鼠标弹起时，“画笔”停止“作画”。也要考虑到鼠标离开canvas时，也要停止“作画”。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>刮奖</title><link rel="stylesheet" href="css/index.css"></head>
<body>
<div class="big"><canvas id="mycan" class="mycan" width="685" height="759">这个浏览器不支持canvas</canvas><img src="data:images/1.jpg">
</div><script src="js/index.js"></script>
</body>
</html>

css代码

.big{position: relative;
}
.mycan{position: absolute;z-index: 1;
}
img{position: absolute;width: 685px;height: 759px;
}

js代码

{let cvs = document.getElementById('mycan');let ctx = cvs.getContext('2d');ctx.fillStyle = "#ccc";//背景颜色为#cccctx.rect(0,0,685,759);ctx.fill();//填充ctx.fillStyle="#000";//字体颜色为#000ctx.font ="40px Arial";//字体和字体大小ctx.fillText("点击刮奖",250,340,200);ctx.globalCompositeOperation = 'destination-out';//在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。ctx.lineWidth = 80;  //设置”画笔“粗细ctx.lineJoin = "round";//设置线的接头为圆型ctx.lineCap = "round";//设置线的两端为圆型function move(){ctx.lineTo(event.offsetX,event.offsetY);ctx.stroke();}//鼠标事件cvs.addEventListener("mousedown",function () {ctx.beginPath();ctx.moveTo(event.offsetX,event.offsetY);cvs.addEventListener("mousemove",move)});cvs.addEventListener("mouseleave",function () {cvs,removeEventListener("mousemove",move);});cvs.addEventListener("mouseup",function () {cvs,removeEventListener("mousemove",move);});}

这样就完成了简单的抽奖效果。抽到一只有魅力的哈士奇呢。

用原生js实现刮奖效果相关推荐

HTML5实现刮奖效果
原文:HTML5实现刮奖效果要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...
JavaScript刮奖效果(jquery图片刮奖插件)
原文出处: http://www.codefans.net/jscss/code/4593.shtml jquery.scratchie.js图片刮奖插件实例演示代码,可实现类似刮奖的效果,刮刮乐中的 ...
入门canvas - 通过刮奖效果来学习
一 .前言一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
简单入门canvas - 通过刮奖效果来学习
一 .前言一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
canvas刮奖效果
上次写刮奖效果都一年前了,那时候还是百度找的源码给改的,自己其实也是迷迷糊糊的,这次因为让妹子写,然后想着自己也重新整理下. <!DOCTYPE html> <html> &l ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
刮刮奖效果的简单实现
刮刮奖效果的简单实现无意中看到个刮刮奖的效果,觉得很有意思.就想自己也做一个,怎样用html5及javascript实现呢,回忆以前做报表的时候,用过html5 canvas元素.心里就有思路了. ...
html5刮奖效果,HTML5+Canvas实战之刮奖效果
项目描述 HTML5+Canvas实战之刮奖效果,实现网页上刮奖,可以用作验证码: 可以在移动设备上和PC端网页(浏览器要支持canvas)上运行 ##使用说明 var lottery = new L ...
html5刮奖效果,HTML5 Canvas实战之刮奖效果
近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理原理很简单,就是在刮奖区添加两个canvas, ...

用原生js实现刮奖效果

用原生js实现刮奖效果相关推荐

最新文章

热门文章