在 Canvas 中繪制扇形

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

 

 

來自藍飛技術部落格