开发
API

CanvasContext.arc

基础库 1.0.0 开始支持本方法。

根据指定方向(默认顺时针)从起始点开始创建一条弧线。

语法

CanvasContext.arc(x, y, r, sAngle, eAngle, anticlockwise)

参数说明

参数类型默认值必填说明最低支持版本
xnumber圆弧中心(圆心)的 x 轴坐标1.0.0
ynumber圆弧中心(圆心)的 y 轴坐标1.0.0
rnumber圆的半径1.0.0
sAnglenumber起始弧度,单位弧度(在 3 点钟方向)1.0.0
eAnglenumber终止弧度1.0.0
anticlockwisestring弧度的方向是否是逆时针1.0.0

返回值

代码示例

【代码示例 1】简单绘制

<!-- index.ttml -->
<canvas canvas-id="myCanvas"></canvas>
// index.js
Page({
  onLoad: function (options) {
    const canvasCtx = tt.createCanvasContext("myCanvas");
    canvasCtx.beginPath();
    canvasCtx.arc(75, 75, 50, 0, 2 * Math.PI);
    canvasCtx.stroke();
    canvasCtx.draw();
  },
});

【代码示例 2】详细示例

其中关键点为:

  • 绿色点:圆心(100, 75)
  • 红色点:起始弧度(0)
  • 蓝色点:终止弧度(1.5 * Math.PI)
<!-- index.ttml -->
<canvas canvas-id="myCanvas"></canvas>
// index.js
Page({
  onLoad: function (options) {
    const canvasCtx = tt.createCanvasContext("myCanvas");
    const canvasCtx = tt.createCanvasContext("myCanvas");

    // 绘制坐标
    canvasCtx.arc(100, 75, 50, 0, 2 * Math.PI);
    canvasCtx.setFillStyle("#EEEEEE");
    canvasCtx.fill();

    canvasCtx.beginPath();
    canvasCtx.moveTo(40, 75);
    canvasCtx.lineTo(160, 75);
    canvasCtx.moveTo(100, 15);
    canvasCtx.lineTo(100, 135);
    canvasCtx.setStrokeStyle("#AAAAAA");
    canvasCtx.stroke();

    canvasCtx.setFontSize(12);
    canvasCtx.setFillStyle("black");
    canvasCtx.fillText("0", 165, 78);
    canvasCtx.fillText("0.5*PI", 83, 145);
    canvasCtx.fillText("1*PI", 15, 78);
    canvasCtx.fillText("1.5*PI", 83, 10);

    // 绘制关键点
    canvasCtx.beginPath();
    canvasCtx.arc(100, 75, 2, 0, 2 * Math.PI);
    canvasCtx.setFillStyle("lightgreen");
    canvasCtx.fill();

    canvasCtx.beginPath();
    canvasCtx.arc(100, 25, 2, 0, 2 * Math.PI);
    canvasCtx.setFillStyle("blue");
    canvasCtx.fill();

    canvasCtx.beginPath();
    canvasCtx.arc(150, 75, 2, 0, 2 * Math.PI);
    canvasCtx.setFillStyle("red");
    canvasCtx.fill();

    // 绘制圆弧
    canvasCtx.beginPath();
    canvasCtx.arc(100, 75, 50, 0, 1.5 * Math.PI);
    canvasCtx.setStrokeStyle("#333333");
    canvasCtx.stroke();

    canvasCtx.draw();
  },
});

Bug & Tip

点击纠错
评价此篇文档