CanvasContext.arc

解釋：畫一條弧線。

方法參數(shù)

示例

圖片示例

代碼示例 1 

在開發(fā)者工具中打開

<canvas canvas-id="myCanvas" class="myCanvas" />

Page({
    onLoad() {
        const canvasContext = swan.createCanvasContext('myCanvas');
        canvasContext.arc(100, 75, 50, 0, 2 * Math.PI);
        canvasContext.setFillStyle('blue');
        canvasContext.fill();
        canvasContext.draw();
    }
});

圖片示例

代碼示例 2：連續(xù)畫弧 

在開發(fā)者工具中打開

<canvas canvas-id="myCanvas"></canvas>

Page({
    onLoad() {
        let canvasContext = swan.createCanvasContext('myCanvas');
        canvasContext.arc(100, 98, 40, 0, 2 * Math.PI);
        canvasContext.setFillStyle('blue');
        canvasContext.fill();
        canvasContext.setLineWidth(6);
        canvasContext.setStrokeStyle('#FFB7DD');
        canvasContext.setLineCap('round')
        canvasContext.beginPath();
        canvasContext.arc( 75, 65, 20, Math.PI * 0.75,  Math.PI * 1.85, false);
        canvasContext.arc( 115, 60, 20, Math.PI * 1.15,  Math.PI * 2.15, false);
        canvasContext.arc( 140, 90, 20, Math.PI * 1.55,  Math.PI * 2.45, false);
        canvasContext.arc( 125, 125, 20, Math.PI * 1.75,  Math.PI * 2.75, false);
        canvasContext.arc( 90, 135, 20, Math.PI * 2.15,  Math.PI * 3.15, false);
        canvasContext.arc( 60, 105, 20, Math.PI * 2.40,  Math.PI * 3.50, false);
        canvasContext.closePath();
        canvasContext.stroke();
        canvasContext.draw();
    }
}

代碼示例 3：counterclockwise 為 true 

在開發(fā)者工具中打開

<canvas canvas-id="myCanvas" class="myCanvas" />

Page({
    onLoad() {
        const canvasContext = swan.createCanvasContext('myCanvas');
        // counterclockwise 的可選值還有 false
        canvasContext.arc(100, 75, 50, 2, 2 * Math.PI, true);
        canvasContext.setFillStyle('blue');
        canvasContext.fill();
        canvasContext.draw();
    }
});