本文介绍基于HTML5 Canvas实现的手机刮刮乐效果，重点解析如何通过原型prototype扩展CanvasRenderingContext2D的clearArc方法以实现圆形区域像素清除。尽管该方法在边缘圆滑度上存在轻微锯齿瑕疵，但已满足基本交互需求，适合移动端快速开发参考。
HTML5 Canvas刮刮乐实现与clearArc原型扩展
在手机端实现刮刮乐效果时，HTML5代码通过原型（prototype）机制对CanvasRenderingContext2D进行了扩展，新增了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>内容总结与资源支持
以上内容为本文核心分享，旨在为相关技术学习提供实用参考。如需获取更多类似技术资源，请持续关注本站更新。