CanvasContext.arc

解释:画一条弧线。

# 方法参数

参数名 属性 必填 默认值 说明
x Number 圆的 x 坐标
y Number 圆的 y 坐标
r Number 圆的半径
sAngle Number 起始弧度,单位弧度(在 3 点钟方向)
eAngle Number 终止弧度
counterclockwise Boolean false,即顺时针 指定弧度的方向是逆时针还是顺时针。

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 图片示例

图片

# 代码示例 1:

    <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: 连续画弧

      <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

        <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();
            }
        });