这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.
Canvas 2D API 的接口 Path2D
用来声明路径,此路径稍后会被CanvasRenderingContext2D
对象使用。CanvasRenderingContext2D
接口的 路径方法 也存在于 Path2D 这个接口中,允许你在 canvas 中根据需要创建可以保留并重用的路径。
构造函数
Path2D()
Path2D
构造函数。 创建一个新的Path2D
对象。
方法
Path2D.addPath()
- 添加一条新路径到对当前路径。
Path2D.closePath()
- 使笔点返回到当前子路径的起始点。它尝试从当前点到起始点绘制一条直线。 如果图形已经是封闭的或者只有一个点,那么此函数不会做任何操作。
Path2D.moveTo()
- 将一个新的子路径的起始点移动到(x,y)坐标。
Path2D.lineTo()
- 使用直线连接子路径的终点到
x, y
坐标。 Path2D.bezierCurveTo()
- 添加一条三次贝赛尔曲线到当前路径。 该方法需要三个点。 第一、第二个点是控制点,第三个点是结束点。起始点是当前路径的最后一个点,绘制贝赛尔曲线前,可以通过调用
moveTo()
进行修改。 Path2D.quadraticCurveTo()
- 添加一条二次贝赛尔曲线到当前路径。
Path2D.arc()
- 添加一条圆弧路径。 圆弧路径的圆心在 (x, y) 位置,半径为 r ,根据anticlockwise (默认为顺时针)指定的方向从 startAngle 开始绘制,到 endAngle 结束。
Path2D.arcTo()
- 根据控制点和半径添加一条圆弧路径,使用直线连接前一个点。
Path2D.ellipse()
- 添加一条椭圆路径。椭圆的圆心在(x,y)位置,半径分别是radiusX 和 radiusY ,按照anticlockwise (默认顺时针)指定的方向,从 startAngle 开始绘制,到 endAngle 结束。
Path2D.rect()
- 创建一条矩形路径,矩形的起点位置是 (x, y) ,尺寸为 width 和 height。
规范描述
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard Path2D |
Living Standard |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | 31 (31) | 未实现 | (Yes) | 未实现 |
Path2D.addPath() |
(Yes) | 34 (34) | 未实现 | (Yes) | 未实现 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | 31.0 (31) | 未实现 | (Yes) | 未实现 |
Path2D.addPath() |
(Yes) | 34.0 (34) | 未实现 | (Yes) | 未实现 |