[HTML5]如何在 Canvas 中绘制扇形

蓝飞 | 时间：2014-12-02, Tue | 4,063 views
　

在 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; };

如需转载请注明出处：蓝飞技术部落格

标签：

上一篇　下一篇

4 条评论 »

WOW～终于更新了

蓝飞

树浩？

秦章建

QQ联系不上呀 不用QQ了？

白娟

如果是类似于饼状图，同时出现好几个扇形，该怎么画

添加新评论 »