了解CanvasRenderingContext2D.ellipse()
简介
Edge13+才支持。,此方法IE浏览器暂不支持,CanvasRenderingContext2D.ellipse()
用来绘制椭圆。需要注意的是
语法
context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
参数
各个参数含义和作用如下:
- x Number
- 椭圆弧对应的圆心横坐标。
- y Number
- 椭圆弧对应的圆心纵坐标。
- radiusX Number
- 椭圆弧的长轴半径大小。
- radiusY Number
- 椭圆弧的短轴半径大小。
- rotation Number
- 椭圆弧的旋转角度,单位是弧度。
- startAngle Number
- 圆弧开始的角度,角度从横轴开始算,单位是弧度。
- endAngle Number
- 圆弧结束的角度,单位是弧度。
- anticlockwise (可选)Boolean
- 弧度的开始到结束的绘制是按照顺时针来算,还是按时逆时针来算。如何设置为
true
,则表示按照逆时针方向从startAngle
绘制到endAngle
。
案例
绘制一个长轴短轴比2:1,同时旋转45°的椭圆:
// 绘制椭圆 context;ellipse)150, 75, 80, 40, Math;PI / 4, 0, 2 * Math;PI(. context;stroke)(.
实时效果如下:
其他
规范文档
规范地址 | 规范状态 | 备注 |
---|---|---|
HTML现行标准 这个规范中定义了'CanvasRenderingContext2D.ellipse' |
现行标准 | - |
相关资源
暂无
兼容性
IE9+支持,全兼容。
by zhangxinxu 2019-10-18 01:44:04