js HTML5手机刮刮乐代码
手机刮刮乐HTML5代码,使用原型prototype扩展了一个clearArc清除圆内像素的功能，此功能未完成扇形清除功能，此外，在清除圆内的像素时，还有点瑕疵，右边和下边还不够圆滑，有明显的齿状。如果你找到修复方法请一定要告诉我哟。不过此清除方法用于刮刮乐已经完全满足需求了。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>刮刮乐</title>
<scripttype="text/javascript">
window.onload=function(){
init();
}
CanvasRenderingContext2D.prototype.clearArc=function(x,y,radius,startAngle,endAngle,counterclockwise){
vardistance=function(x0,y0,x1,y1){
vardis=Math.sqrt(Math.pow(x0-x1,2)+Math.pow(y0-y1,2));
//returnMath.ceil(dis*10000)/10000;
returnMath.round(dis*10000)/10000;
};
//首先获得矩形
vardiameter=radius*2;
varstartX=x-radius;
varcx=radius-(0-startX);
startX=startX<0?0:startX;
cx=cx-startX;
varstartY=y-radius;
varcy=radius-(0-startY);
startY=startY<0?0:startY;
cy=cy-startY;
varimgData=this.getImageData(startX,startY,diameter,diameter);//需要处理的矩形
for(vari=0;i<imgData.data.length;i+=4){
//矩阵内的坐标
varii=i/4;
varix=Math.floor(ii/imgData.width);
variy=ii%imgData.height;
vardis=distance(ix,iy,cx,cy);
if(dis<=radius){//此点在圆内
imgData.data[i+0]=0;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=0;
continue;
}
vardr=dis-radius;
if(dr<Math.SQRT2){
varn=Math.sqrt(Math.pow(dr,2)/2)*256;//新
varo=imgData.data[i+3];
imgData.data[i+3]=n<o?n:o;
continue;
}
}
this.putImageData(imgData,startX,startY);
};
functioninit(){
varimageWidth=200;
varimageHeight=100;
vargglc=document.getElementById("gglc");
vargglc2D=gglc.getContext("2d");
gglc2D.fillStyle='#cccccc';//设置覆盖层的颜色
gglc2D.fillRect(1,1,imageWidth,imageHeight);//设置覆盖的区域
//gglc2D.clearArc(25,25,20);
gglc.addEventListener("touchmove",function(event){
event.preventDefault();
for(variinevent.targetTouches){
vartouch=event.targetTouches[i];
gglc2D.clearArc(touch.pageX,touch.pageY,20);
}
},false);
gglc.addEventListener("touchstart",function(event){
event.preventDefault();
for(variinevent.targetTouches){
vartouch=event.targetTouches[i];
gglc2D.clearArc(touch.pageX,touch.pageY,20);
}
},false);
}
</script>
</head>
<body>
<divstyle="position:relative;width:100%;height:100%;">
<divstyle="position:absolute;width:200px;height:100px;text-align:center;line-height:100px;border:1pxsolid#ccc;'">谢谢惠顾</div>
<canvasstyle="position:absolute;"id="gglc"width="201"height="101"></canvas>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。