canvasrenderingcontext2d.arc(number x, number y, number r, number startangle, number endangle, boolean anticlockwise)
基础库 或更高版本; 若版本较低,建议采取 兼容处理。
主体: 企业支付宝小程序 、 个人支付宝小程序
将一个圆弧添加到当前子路径。
要创建一个圆形可以指定起始弧度为 0,终止弧度为 2 * math.pi
。
效果示例
代码示例执行效果
number x
圆心 x 坐标。
number y
圆心 y 坐标。
number r
圆半径。
number startangle
圆弧起始的角度,以弧度为单位,从 x 正半轴开始,顺时针测量。
number endangle
圆弧终止的角度,以弧度为单位,从 x 正半轴开始,顺时针测量。
number anticlockwise
绘制时是否以逆时针方向绘制圆弧。可选。默认为 false。
代码示例
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
// 画一个辅助圆形并填充颜色
ctx.arc(100, 75, 50, 0, 2 * math.pi)
ctx.fillstyle = '#eeeeee'
ctx.fill()
// 画一个辅助十字
ctx.beginpath()
ctx.moveto(40, 75)
ctx.lineto(160, 75)
ctx.moveto(100, 15)
ctx.lineto(100, 135)
ctx.strokestyle = '#aaaaaa'
ctx.stroke()
// 画辅助文字
ctx.font = '12px'
ctx.fillstyle = '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.fillstyle = 'lightgreen'
ctx.fill()
ctx.beginpath()
ctx.arc(100, 25, 2, 0, 2 * math.pi)
ctx.fillstyle = 'blue'
ctx.fill()
ctx.beginpath()
ctx.arc(150, 75, 2, 0, 2 * math.pi)
ctx.fillstyle = 'red'
ctx.fill()
// 画一段圆弧
ctx.beginpath()
ctx.arc(100, 75, 50, 0, 1.5 * math.pi)
ctx.strokestyle = '#333333'
ctx.stroke()
})
},
})
<canvas id="canvas" type="2d" onready="oncanvasready">canvas>