canvascontext.arc(number x, number y, number r, number sangle, number eangle, boolean counterclockwise)
支付宝客户端 支持
支小宝客户端 支持
安诊儿客户端 支持
主体： 企业支付宝小程序 、 个人支付宝小程序
相关文档： 旧版 canvas 迁移指南
创建一个弧线路径。
- 创建一个实心圆形可以指定起始弧度为 0，终止弧度为
2 * math.pi，并用fill()填充。 - 用
stroke()方法在 canvas 中画弧线。
number x
圆弧中心（圆心）的 x 轴坐标
number y
圆弧中心（圆心）的 y 轴坐标
number radius
圆弧的半径
number startangle
圆弧的起始点
number endangle
圆弧的终点
boolean counterclockwise
是否逆时针绘制圆弧，可选，默认值为 false
可选
.js
const ctx = my.createcanvascontext('canvas')
// 画一个圆形并填充颜色
ctx.arc(100, 75, 50, 0, 2 * math.pi)
ctx.setfillstyle('#eeeeee')
ctx.fill()
// 画一个十字
ctx.beginpath()
ctx.moveto(40, 75)
ctx.lineto(160, 75)
ctx.moveto(100, 15)
ctx.lineto(100, 135)
ctx.setstrokestyle('#aaaaaa')
ctx.stroke()
// 画文字
ctx.setfontsize(12)
ctx.setfillstyle('black')
ctx.filltext('0', 165, 78)
ctx.filltext('0.5*pi', 83, 145)
ctx.filltext('1*pi', 15, 78)
ctx.filltext('1.5*pi', 83, 10)
// 画上绿、蓝、红三个小圆形
ctx.beginpath()
ctx.arc(100, 75, 2, 0, 2 * math.pi)
ctx.setfillstyle('lightgreen')
ctx.fill()
ctx.beginpath()
ctx.arc(100, 25, 2, 0, 2 * math.pi)
ctx.setfillstyle('blue')
ctx.fill()
ctx.beginpath()
ctx.arc(150, 75, 2, 0, 2 * math.pi)
ctx.setfillstyle('red')
ctx.fill()
// 画一段弧线
ctx.beginpath()
ctx.arc(100, 75, 50, 0, 1.5 * math.pi)
ctx.setstrokestyle('#333333')
ctx.stroke()
ctx.draw()
运行效果
arc(100, 75, 50, 0, 1.5 * math.pi) 的三个关键坐标如下：
- 绿色: 圆心 (100, 75)。
- 红色: 起始弧度 (0)。
- 蓝色: 终止弧度 (1.5 * math.pi)。