canvasrenderingcontext2d.ellipse(number x, number y, number radiusx, number radiusy, number rotation, number startangle, number endangle, boolean counterclockwise)
基础库 或更高版本； 若版本较低，建议采取 兼容处理。
主体： 企业支付宝小程序 、 个人支付宝小程序
添加一个椭圆弧到当前子路径。
效果示例
代码示例执行效果
number x
圆心 x 坐标。
number y
圆心 y 坐标。
number radiusx
椭圆长轴(major axis)的半径。
number radiusy
椭圆短轴(minor axis)的半径。
number rotation
椭圆顺时针旋转的角度，单位为弧度
number startangle
椭圆弧起始点的离心角角度，从正 x 轴顺时针测量并以弧度表示。
number endangle
椭圆弧结束点的离心角角度，从正 x 轴顺时针测量并以弧度表示。
number counterclockwise
是否沿逆时针方向绘制椭圆。可选。默认为 false。
一般绘制
不同起始点与结束点
沿逆时针方向绘制
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
// 绘制椭圆
ctx.beginpath()
ctx.ellipse(100, 100, 50, 75, math.pi / 4, 0, 2 * math.pi)
ctx.stroke()
// 绘制辅助虚线
ctx.beginpath()
ctx.setlinedash([5, 5])
ctx.moveto(0, 200)
ctx.lineto(200, 0)
ctx.stroke()
})
},
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
ctx.beginpath()
ctx.ellipse(50, 130, 40, 60, 0, 0, 0.5 * math.pi)
ctx.stroke()
ctx.beginpath()
ctx.ellipse(150, 130, 40, 60, 0, 0, 1 * math.pi)
ctx.stroke()
ctx.beginpath()
ctx.ellipse(250, 130, 40, 60, 0, 0, 1.5 * math.pi)
ctx.stroke()
})
},
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>红点代表了起始点，蓝点代表了结束点。
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
ctx.beginpath()
ctx.ellipse(50, 130, 40, 60, 0, 0, 0.5 * math.pi)
ctx.stroke()
ctx.beginpath()
ctx.ellipse(150, 130, 40, 60, 0, 0, 0.5 * math.pi, true)
ctx.stroke()
})
},
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>红点代表了起始点，蓝点代表了结束点。
顺时针
逆时针
- tip椭圆的轴：