刮刮卡的效果和这个一样,只是我这个是画的雾,擦雾擦着擦着雾就消失的效果,
html代码:
.cloud{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 999999;
}
<div class="cloud hide">
<canvas></canvas>
</div>
js代码:
function doCa(){
var img = new Image();
var canvas = document.querySelector('canvas');
canvas.style.backgroundColor='transparent';
canvas.style.position = 'absolute';
canvas.style.width = '100%';
canvas.style.height = '100%';
var imgs = ['/images/cloud-animate.png'];//我这里用的是图片,半透明的云
img.src = imgs[0];
img.addEventListener('load', function(e) {
var ctx;
var w = img.width,
h = img.height;
var offsetX = canvas.offsetLeft,
offsetY = canvas.offsetTop;
var mousedown = false;
var key = 0;//滑动的点的个数,我是根据这个个数来判断什么时候隐藏掉雾的这个div层的
function layer(ctx) {
var imgs=document.getElementById("cloud-animate");
var pat=ctx.createPattern(imgs,'no-repeat');
ctx.fillStyle=pat;
ctx.fillRect(0, 0, w, h);
}
function eventDown(e){
e.preventDefault();
mousedown=true;
}
function eventUp(e){
e.preventDefault();
mousedown=false;
}
function eventMove(e){
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) {
beginPath()
arc(x, y, 50, 0, Math.PI * 2);
fill();
//滑动的时候,没动一下记录一次
if(key >= 150){
$(".cloud").addClass('hide');
key = 0;
}else{
key++;
}
}
}
}
canvas.width=w;
canvas.height=h;
ctx=canvas.getContext('2d');
ctx.fillStyle='transparent';
ctx.fillRect(0, 0, w, h);
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);
});
}
vue2 Implicit conversion from float int loses precision php8Implicit Mysql8新增用户,mysql8配置权限,mysql8配置,mysql8配置文件 Linux命令,scp,scp命令,Linux复制 git commit git add centos git 搭建FTP,Linux FTP,禁止FTP登录ssh 上传文件,阿里云OSS上传,文件上传到OSS,OSS文件上传,OSS上传 微信支付,微信支付V3,PHP微信支付,微信nativePay支付,微信jsapi支付 微信支付,微信支付V3,PHP微信支付 bootstrap4 modal, lavarel The subversion command line tools are no longer provided by Xcode. 银联支付,tp5.1银联支付 支付宝即时到账,PHP支付宝 system libzip must be upgraded to version >= 0.11 CMake 3.0.2 or higher is required