手機刮刮樂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 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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
