手机刮刮乐HTML5代码详解编程语言

手机刮刮乐HTML5代码,

使用原型prototype扩展了一个clearArc 清除圆内像素的功能，

此功能未完成扇形清除功能，

此外，在清除圆内的像素时，还有点瑕疵，右边和下边还不够圆滑，有明显的齿状。如果你找到修复方法请一定要告诉我哟。不过此清除方法用于刮刮乐已经完全满足需求了

 

 !DOCTYPE html 

 html 

 head 

 meta charset="UTF-8" 

 meta name="viewport" content="width=device-width, initial-scale=1.0" 

 title 刮刮乐 /title 

 script type="text/javascript" 

 window.onload = function() { 

 init(); 

 CanvasRenderingContext2D.prototype.clearArc=function(x,y,radius,startAngle, endAngle, counterclockwise){ 

 var distance = function(x0,y0,x1,y1){ 

 var dis = Math.sqrt(Math.pow(x0-x1,2)+Math.pow(y0-y1,2)); 

 //return Math.ceil(dis*10000)/10000; 

 return Math.round(dis*10000)/10000; 

 //首先获得矩形 

 var diameter = radius*2; 

 var startX = x-radius; 

 var cx = radius-(0-startX); 

 startX = startX 0?0:startX; 

 cx = cx-startX; 

 var startY = y-radius; 

 var cy = radius-(0-startY); 

 startY = startY 0?0:startY; 

 cy = cy-startY; 

 var imgData = this.getImageData(startX,startY,diameter,diameter);//需要处理的矩形 

 for (var i=0;i imgData.data.length;i+=4){ 

 //矩阵内的坐标 

 var ii = i/4; 

 var ix = Math.floor(ii/imgData.width); 

 var iy = ii%imgData.height; 

 var dis = 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; 

 var dr = dis-radius; 

 if(dr Math.SQRT2){ 

 var n = Math.sqrt(Math.pow(dr, 2)/2)*256;//新 

 var o = imgData.data[i+3]; 

 imgData.data[i+3]=n o?n:o; 

 continue; 

 this.putImageData(imgData,startX,startY); 

 function init() { 

 var imageWidth = 200; 

 var imageHeight = 100; 

 var gglc = document.getElementById("gglc"); 

 var gglc2D = 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(var i in event.targetTouches){ 

 var touch = event.targetTouches[i]; 

 gglc2D.clearArc(touch.pageX,touch.pageY,20); 

 }, false); 

 gglc.addEventListener("touchstart", function(event) { 

 event.preventDefault(); 

 for(var i in event.targetTouches){ 

 var touch = event.targetTouches[i]; 

 gglc2D.clearArc(touch.pageX,touch.pageY,20); 

 }, false); 

 /script 

 /head 

 body 

 div 

 div style="position: absolute; width: 200px; height: 100px; text-align: center;line-height: 100px;border: 1px solid #ccc;" 谢谢惠顾 /div 

 canvas id="gglc" width="201" height="101" /canvas 

 /div 

 /body 

 /html 

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/8736.html