canvas实现简单的刮刮乐功能

canvas实现刮刮乐效果

平时浏览一些购物网站常常有一些抽奖的环节它们就会使用一种刮刮乐的形式给用户发一些优惠券或者其它的一些奖品，对此突然产生了些许兴趣于是就琢磨着该如何实现，最终还是选择了canvas来实现这个效果

思路

思路很简单，无非就是绘制一个用来刮的蒙版矩形，给画布添加鼠标移动事件，在鼠标移动时不断绘制以鼠标为圆心的圆形闭合路径，重点是图形合成globalCompositeOperation 属性使用‘destination-out’，用来抹除重叠的部分

ctx.globalCompositeOperation = ‘destination-out’

demo

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>body {display: flex;justify-content: center;align-items: center;height: 90vh;background-color: #fff;}#myCanvas {background: url('C:\\Users\\Administrator\\Pictures\\Saved Pictures\\111.jpg')center/cover;}</style></head><body><canvas id="myCanvas" width="500px" height="300px"></canvas><script>// 获取canvas对象const canvas = document.getElementById('myCanvas')// 获取上下文对象const ctx = canvas.getContext('2d')// 判断鼠标是否处于按压状态let canDraw = false// 给画布绘制刮层蒙版ctx.fillStyle = '#9c9fb3'ctx.fillRect(0, 0, 500, 300)// 绘制“刮一刮”字样ctx.font = '40px Arial'ctx.fillStyle = '#333'ctx.fillText('刮一刮', 180, 150)// 重点：利用 globalCompositeOperation 属性来改变绘制图形重叠的合成样式，以下‘destination-out’仅仅保留老图像与新图像没有重叠的部分ctx.globalCompositeOperation = 'destination-out'// 鼠标按下事件canvas.addEventListener('mousedown', function (e) {canDraw = truedrawCircle(e)})// 鼠标弹起事件canvas.addEventListener('mouseup', function () {canDraw = false})// 鼠标移动事件canvas.addEventListener('mousemove', function (e) {if (canDraw) {drawCircle(e)}})// 绘制圆的方法function drawCircle (e) {ctx.beginPath()ctx.arc(e.pageX - canvas.offsetLeft,e.pageY - canvas.offsetTop,10,0,Math.PI * 2)ctx.fill()ctx.closePath()}</script></body>
</html>

效果

刮前

刮后

canvas实现简单的刮刮乐功能相关推荐

html5 刮刮乐源码,HTML5 canvas实现刮刮乐功能
最近比较闲,除了在群里给大家交流交流,就没啥学习重心.看了论坛里的各种帖子,各种问题满天飞,这里我就整理了2个h5 canvas的demo,分享给大家! 使用html5的canvas实现刮刮乐功能舍 ...
简单的Canvas刮刮乐带动画效果的实例
今天做了个刮刮乐领奖品的小活动,感觉挺有用的,整理在这儿记录下上个效果图先: 加了个简单的 css 动画效果下面贴上主要代码: index.html <!DOCTYPE html> & ...
使用Canvas制作刮刮乐，看看你能刮出什么奖品来？
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言今天在一个彩票网站看到了一个刮刮乐的效果,觉得挺有意思的就打算来仿写一个,经过一番简单的思考大概就有了基本都想法.总体效果使用Can ...
H5 Canvas刮刮乐
玩游戏的人很多时候都会遇到翻牌子开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了其实很多时候在你点开那个 ...
制作简单刮刮乐View
一.引言本篇刮刮乐,基于PorterDuffXfermode实现. Mode.CLEAR Mode.SRC Mode.DST Mode.SRC_OVER Mode.DST_OVER ...
用Canvas实现刮刮卡功能的研究与实践
前几天,单位老刘让我研究一下网上最近很流行的"刮刮卡"是怎么实现的,我第一时间就想起了我媳妇曾经跟我说过的:"在HTML5中Canvas的绘图能力很强大" ...
【Android界面实现】使用Canvas对象实现“刮刮乐”效果
在淘宝.京东等电商举办活动的时候,经常可以看到在移动客户端推出的各种刮奖活动,而这种活动也受到了很多人的喜爱.从客户端的体验来说,这种效果应该是通过网页来实现的,那么,我们使用Android的自带控件 ...
uni-app使用Canvas实现刮刮乐效果
uni-app使用canvas实现刮刮乐效果在uni-app中使用canvas比较简单,官方参考文档写的非常详细.但是uni-app使用canvas真的有很多坑,所有单独记录下自己的爬坑之旅. dr ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...

canvas实现简单的刮刮乐功能

canvas实现刮刮乐效果

思路

demo

效果

canvas实现简单的刮刮乐功能相关推荐

最新文章

热门文章