Path2D - Web API 接口参考 编辑

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

规范描述

SpecificationStatusComment
HTML Living Standard
Path2D
Living Standard 

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support(Yes)31 (31)未实现(Yes)未实现
Path2D.addPath()(Yes)34 (34)未实现(Yes)未实现
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support(Yes)31.0 (31)未实现(Yes)未实现
Path2D.addPath()(Yes)34.0 (34)未实现(Yes)未实现

参见

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:107 次

字数:9541

最后编辑:7年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文