CanvasContext.arc

解释：画一条弧线。

方法参数

示例

扫码体验

请使用百度APP扫码

图片示例

代码示例1 ：

在开发者工具中预览效果

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

图片示例

代码示例2 - 连续画弧 ：

在开发者工具中预览效果

  1. Page({    onReady() {        let canvasContext = swan.createCanvasContext('canvas1');        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 ：

在开发者工具中预览效果

  1. Page({    onReady: function () {        const canvasContext = swan.createCanvasContext('myCanvas');        canvasContext.arc(100, 75, 50, 2, 2 * Math.PI, true);        canvasContext.setFillStyle('blue');        canvasContext.fill();        canvasContext.draw();    }});

代码示例4 - counterclockwise为false ：

在开发者工具中预览效果

  1. Page({    onReady: function () {        const canvasContext = swan.createCanvasContext('myCanvas');        canvasContext.arc(100, 75, 50, 2, 2 * Math.PI, false);        canvasContext.setFillStyle('blue');        canvasContext.fill();        canvasContext.draw();    }});