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

 

 

來自藍飛技術部落格

 

在 Canvas 中繪製扇形