js HTML5手机刮刮乐代码

时间：2021-05-26

手机刮刮乐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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章