js 实现刮刮乐卡片效果

需要用到的知识点

1.canvas globalCompositeOperation ：设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上 ,这个属性是重点
2.canvas getImageData：getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
3.Element.getBoundingClientRect：方法返回元素的大小及其相对于视口的位置。

效果图：

css

 *{padding: 0;margin: 0;}body{display: flex;align-items: center;justify-content: center;flex-direction: column;height: 100vh;}.canvas_box{position: relative;width: 569px;height: 234px;border: 1px solid #ccc;}.canvas_box img{position: absolute;left: 0;top: 0;width: 569px;height: 234px;}.canvas_box canvas{position: absolute;left: 0;top: 0;z-index: 10;}button{width: 200px;height: 100px;font-size: 16px;}

html

    <div class="canvas_box"><img src="./canvas_btm.png" alt="刮刮乐底图"><canvas  id="canvas"></canvas></div><button id="button">再来一次</button>

javascript

window.onload = function(){var mousedown = false;//判断是否在canvas按下var canvas = document.getElementById('canvas');var button = document.getElementById('button');var ctx = canvas.getContext('2d');var w = 569,h = 234;canvas.width = w;canvas.height = h;//给画布添加事件//若需要在pc端展示，请将下面的事件改为pc端事件mousedown、mouseup、mousemovecanvas.addEventListener('touchstart',function (ev) {ev = ev || event;ev.preventDefault();mousedown = true;});canvas.addEventListener('touchmove',function (ev) {ev = ev || event;ev.preventDefault();if(mousedown) {if(ev.changedTouches){ev=ev.changedTouches[ev.changedTouches.length-1];}var position = canvas.getBoundingClientRect();//获取当前元素相对于屏幕的坐标var x = ev.pageX - position.left;var y = ev.pageY - position.top;ctx.beginPath();ctx.arc(x, y, 20, 0, Math.PI * 2);ctx.fill();isArea();}});canvas.addEventListener('touchend',function (ev) {ev = ev || event;ev.preventDefault();mousedown = false});//给按钮添加再来一次事件button.addEventListener('touchstart',function () {init();});init();function init(){//初始化画布的状态ctx.canvas.style.opacity = 1;//给画布铺底色ctx.fillStyle = 'purple';ctx.fillRect(0, 0, w, h);ctx.globalCompositeOperation = 'destination-out';//重点}function isArea(){//判断刮开面积是否到达百分之六十var data = ctx.getImageData(0,0,w,h).data;//获取画布的信息var n = 0 ;for (var i = 0; i < data.length; i++) {if (data[i] == 0) {n++;};};if (n >= data.length * 0.6) {ctx.globalCompositeOperation = 'destination-over';//重点ctx.canvas.style.opacity = 0;alert('教程结束')}}}

js 实现刮刮乐卡片效果相关推荐

html5中canvas画布实现手机端和移动端的刮刮乐效果
用html5中的canvas实现刮刮乐的效果使用html+css实现背景的样式使用clearRect()方法实现挂去的作用手机端使用addEventListener()监听手机端滑动事件tou ...
简单的Canvas刮刮乐带动画效果的实例
今天做了个刮刮乐领奖品的小活动,感觉挺有用的,整理在这儿记录下上个效果图先: 加了个简单的 css 动画效果下面贴上主要代码: index.html <!DOCTYPE html> & ...
Canvas 实现刮刮乐 js实现刮刮乐
Canvas 实现刮刮乐 js实现刮刮乐 **思路: (1)首先需要一个盒子定位,确定刮刮乐区域想要放在哪里 (2)定位盒子里有个放内容的盒子,也就是放奖品的 (3)用一个画布(canvas)把上面的 ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
iOS 仿支付宝刮刮乐效果
支付宝里有个刮刮乐中奖, 和大街小巷里的类似彩票刮刮乐的效果一样. 实现思路, 其实很简单的三步: 展示刮出来的效果的view: 即刮开后刮刮乐效果展示-显示的文字Label 设置遮挡在外面的Imag ...
iOS-仿支付宝刮刮乐效果
概述仿支付宝刮刮乐效果, 可以按照自己需求更改展示刮出来的效果的view(即刮开后刮刮乐效果展示) 详细代码下载:http://www.demodashi.com/demo/10673.html ...
【游戏客户端】实现刮刮乐效果
[游戏客户端]实现刮刮乐效果之前的博客中,我和大家分享了如何做: 商业化的充值活动 :[商业化充值活动博客] 抽卡系统:[抽奖,抽卡系统博客] 装备系统:[装备系统博客] 红点系统:[红 ...
【Unity】刮刮乐效果（擦除图片像素值）
实现类似刮刮乐效果,擦除图片指定像素值(修改图片Alfa通道) 参考Unity刮刮乐工程源码的实现原理,对实现方式有一些调整这里RawImage需要保持原图大小,不能缩放,不然坐标计算会有偏差 us ...
android 实现刮刮乐刮奖效果
在做电商类产品时,经常会有一些活动需求,如抽奖,抽奖的一种方式就是刮刮乐,这次的内容是利用重写View的方式实现刮刮乐的效果. 思路:利用Bitmap做刮奖区的蒙版,利用paint将手指触摸过的区域置 ...

js 实现刮刮乐卡片效果

js 实现刮刮乐卡片效果相关推荐

最新文章

热门文章