清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>
手机刮刮乐HTML5代码,
使用原型prototype扩展了一个clearArc 清除圆内像素的功能,
此功能未完成扇形清除功能,
此外,在清除圆内的像素时,还有点瑕疵,右边和下边还不够圆滑,有明显的齿状。如果你找到修复方法请一定要告诉我哟。不过此清除方法用于刮刮乐已经完全满足需求了
使用原型prototype扩展了一个clearArc 清除圆内像素的功能,
此功能未完成扇形清除功能,
此外,在清除圆内的像素时,还有点瑕疵,右边和下边还不够圆滑,有明显的齿状。如果你找到修复方法请一定要告诉我哟。不过此清除方法用于刮刮乐已经完全满足需求了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <!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 style= "position: relative; width: 100%;height: 100%;" > <div style= "position: absolute; width: 200px; height: 100px; text-align: center;line-height: 100px;border: 1px solid #ccc;'" >谢谢惠顾</div> <canvas style= "position: absolute;" id= "gglc" width= "201" height= "101" ></canvas> </div> </body> </html> |