在 HTML5 Canvas 中,我们可以通过 arc
方法来绘制圆形:
// context.arc(x, y, r, sAngle, eAngle, counterclockwise);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();
但如何绘制一个扇形呢?是不是简单地修改结束角度
2 * Math.PI
就可以了呢?
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, 1.5 * Math.PI);
ctx.fill();
然而,我们会看到一个不符合我们预期的图形:
因为在 arc
方法是用来创建一条弧线的,而如果直接将弧线的起点和终点闭合,再进行填充,自然绘制出的是上面的图形了。
知道了原因,要解决就很简单了,只要让这条弧线与圆心进行闭合,就刚好形成了一个扇形:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 开始一条新路径
ctx.beginPath();
// 位移到圆心,方便绘制
ctx.translate(100, 100);
// 移动到圆心
ctx.moveTo(0, 0);
// 绘制圆弧
ctx.arc(0, 0, 50, 0, Math.PI * 1.5);
// 闭合路径
ctx.closePath();
ctx.fill();
这里的重点在于 moveTo
和 closePath
,将路径的起点设置在圆心,而最后闭合路径,正好就成为了一个扇形。
代码也可以抽取为通用的方法,如下:
CanvasRenderingContext2D.prototype.sector = function(x, y, radius, sAngle, eAngle, counterclockwise) {
this.beginPath();
this.translate(x, y);
this.moveTo(0, 0);
this.arc(0, 0, radius, sAngle, eAngle, counterclockwise);
this.closePath();
return this;
};
来自蓝飞技术部落格