上次写刮奖效果都一年前了，那时候还是百度找的源码给改的，自己其实也是迷迷糊糊的，这次因为让妹子写，然后想着自己也重新整理下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>刮奖效果</title>
<style type="text/css">
#canvas{
display: block;
margin:0 auto;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
// 初始化，设置canva的宽(width)、高(height),涂抹画笔的直径(r)，背景图片(img)（即底层的图片）,上层遮罩层
var width=440;
var height=440;
var r=20;
var img = new Image();
img.src="1.jpg";
var canvas=document.getElementById("canvas");
canvas.style.backgroundImage=‘url(‘+img.src+‘)‘;
canvas.width=width;
canvas.height=height;
var ctx=canvas.getContext("2d");
ctx.fillStyle="#ccc";
ctx.fillRect(0,0,width,height); //绘制上层的涂层
ctx.globalCompositeOperation="destination-out"; //在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
var isMove=false;
var el=new Array();
el.x=canvas.offsetLeft;
el.y=canvas.offsetTop;
/************************************
方式一：利用arc来模拟两端圆角的直线
***********************************/
//按下时
function touchStart(e){
e.preventDefault();
isMove=true;
ctx.closePath();
}
// 移动时
function touchMove(e){
e.preventDefault();
var x,y;
if(isMove){
if(e.targetTouches){ //移动端
var touch=e.targetTouches[0];
x=touch.clientX-el.x; //坐标矫正
y=touch.clientY-el.y;
}else{ //pc端
x=e.pageX-el.x;
y=e.pageY-el.y;
}
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2); //绘制笔触
ctx.fill();
ctx.closePath(); //每次闭合路径
}
}
// 离开时
function touchEnd(e){
e.preventDefault();
isMove=false ;
ctx.closePath();
//涂抹区域百分比
var imgData=ctx.getImageData(0,0,width,height);//返回ImageData对象，该对象拷贝画布指定的像素数据
var pixles=imgData.data;
var transNum=0;
//rgba以数组形式储存在imageData中，
// r=imgData.data[0];
// g=imgData.data[1];
// b=imgData.data[2];
// a=imgData.data[3];
for(var i=3,j=pixles.length;i<j;i+=4){
var a=pixles[i];
if(a==0){
transNum++
}
}
var transPercent=transNum/(pixles.length/4);//透明度比
console.log(transPercent);
//超过某个值显示所有
if(transPercent>0.5){
ctx.fillRect(0,0,width,height);
}
}
/**************************************************************************
方式二：ctx.lineTo(x,y)来画直线，用ctx.lineCap="round";来设置直线两端的圆角
当滑的很快的时候，这种效果比第一种好
***************************************************************************/
//按下时
// function touchStart(e){
// e.preventDefault();
// isMove=true;
// var x,y;
// if(e.targetTouches){ //移动端
// var touch=e.targetTouches[0];
// x=touch.clientX-el.x;
// y=touch.clientY-el.y;
// }else{ //pc端
// x=touch.clientX-el.x;
// y=touch.clientY-el.y;
// }
// ctx.beginPath();
// ctx.lineCap="round";
// ctx.lineJoin="round";
// ctx.lineWidth=r;
// ctx.moveTo(x,y);
// }
// // 移动时
// function touchMove(e){
// e.preventDefault();
// var x,y;
// if(isMove){
// if(e.targetTouches){ //移动端
// var touch=e.targetTouches[0];
// x=touch.clientX;
// y=touch.clientY;
// }else{ //pc端
// x=e.pageX;
// y=e.pageY;
// }
// ctx.lineTo(x,y); //绘制笔触
// ctx.stroke();
// }
// }
// // 离开时
// function touchEnd(e){
// e.preventDefault();
// isMove=false ;
// ctx.closePath();
// }
// 事件监听
canvas.addEventListener("touchstart",touchStart);
canvas.addEventListener("mousedown",touchStart);
canvas.addEventListener("touchmove",touchMove);
canvas.addEventListener("mousemove",touchMove);
canvas.addEventListener("touchend",touchEnd);
canvas.addEventListener("mouseup",touchEnd);
</script>
</body>
</html>
时间： 2024-12-06 04:55:14