手机刮刮乐HTML5代码, 使用原型prototype扩展了一个clearArc 清除圆内像素的功能, 此功能未完成扇形清除功能, 此外,在清除圆内的像素时,还有点瑕疵,右边和下边还不够圆滑,有明显的齿状。如果你找到修复方法请一定要告诉我哟。不过此清除方法用于刮刮乐已经完全满足需求了。
刮刮乐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));
//il(dis*10000)/10000;
und(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 = ImageData(startX,startY,diameter,diameter);//需要处理的矩形
for (var i=0;i
//矩阵内的坐标
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
var n = Math.sqrt(Math.pow(dr, 2)/2)*256;//新
var o = imgData.data[i+3];
imgData.data[i+3]=n
continue;
}
}
this.putImageData(imgData,startX,startY);
};
function init() {
var imageWidth = 200;
var imageHeight = 100;
var gglc = ElementById("gglc");
var gglc2D = Context("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);
}
谢谢惠顾以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
本文发布于:2024-01-29 05:49:31,感谢您对本站的认可!
本文链接:https://www.4u4v.net/it/170647857613144.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
留言与评论(共有 0 条评论) |