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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。