HTML5 Canvas 清除圆形、不规则区域

Canvas 清除不规则区域

欢迎交换友链: laker.me–进击的程序媛
Github:https://github.com/younglaker
V信: lakerHQ (请注明‘来自博客’)

默认 Canvas Api 只提供了清除矩形区域的接口 clearRect(),但有时候需要清除圆形或其他特殊形状的区域。比如我在开发 pixeler 擦除绘制的圆形,刚开始是用 clearRect(), 设置大于圆形直径的正方形来擦除,后来想,能不能直接擦除圆形区域。

根据 Stack Overflow 的回答和 Mozilla 的文档ctx.globalCompositeOperation 提供了多种色彩合成模式,其中 destination-out 能够完成清除效果:

destination-out

可以拓展 Canvas 接口:

1
2
3
4
5
6
7
8
9
CanvasRenderingContext2D.prototype.clearArc = function(x, y, radius, startAngle, endAngle, anticlockwise) {
this.beginPath();
this.globalCompositeOperation = 'destination-out';
this.fillStyle = 'black';
this.arc(x, y, radius, startAngle, endAngle, anticlockwise);
// 参数分别是:圆心横坐标、纵坐标、半径、开始的角度、结束的角度、是否逆时针
this.fill();
this.closePath();
};

进一步,可以自定义各种路径:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
CanvasRenderingContext2D.prototype.clear = function() {
this.save();
this.globalCompositeOperation = 'destination-out';
this.fillStyle = 'black';
this.fill();
this.restore();
};
CanvasRenderingContext2D.prototype.clearArc = function(x, y, radius, startAngle, endAngle, anticlockwise) {
this.beginPath();
this.arc(x, y, radius, startAngle, endAngle, anticlockwise);
this.clear();
};
CanvasRenderingContext2D.prototype.clearShape = function(x, y, radius, startAngle, endAngle, anticlockwise) {
this.beginPath();
// 定义各种不规则图形,如三角形、五角星...
this.clear();
};

调用:

1
2
3
4
5
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.clearArc(50, 100, 10, 0, Math.PI * 2, false);
context.clearArc(80, 100, 20, 0, Math.PI, false);

效果参考


HTML5 Canvas 清除圆形、不规则区域

本文原创自http://laker.me/blog,转载请注明出处,欢迎交换友链

如果本文对您有帮助,微信扫一扫,请我吃个鸡腿吧

评论组件不稳定,有事请联系V信 lakerHQ (请备注来自博客)