在 canvas 中绘制扇形 -凯发娱发k8

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

    };

来自蓝飞技术部落格

在 canvas 中绘制扇形的相关教程结束。