tencent cloud

腾讯云超级应用服务

动态与公告
【2025年1月2日】关于腾讯云小程序平台更名为腾讯云超级应用服务的公告
控制台更新动态
Android SDK 更新动态
iOS SDK 更新动态
Flutter 更新动态
IDE 更新动态
基础库更新动态
产品简介
产品概述
产品优势
应用场景
购买指南
计费概述
按量计费(后付费)
续费指引
停服说明
快速入门
套餐管理
概述
控制台账号管理
存储配置
加速配置
品牌化配置
平台功能
控制台登录
用户和权限体系
小程序管理
小游戏管理
应用管理
商业化
平台管理
用户管理
团队管理
运营管理
安全中心
代码接入指引
Demo 及 SDK 获取
Android
iOS
Flutter
App 服务端接入指南
GUID 生成规则
小程序开发指南
小程序介绍与开发环境
小程序代码组成
指南
框架
组件
API
服务端
JS SDK
基础库
IDE 使用指南
小游戏开发指南
指南
API
服务端
实践教程
小程序登录实践教程
小程序订阅消息实践教程
支付相关实践教程
广告接入实践教程
小游戏订阅消息实践教程
相关协议
数据处理和安全协议

Path2D

PDF
聚焦模式
字号
最后更新时间: 2024-07-12 19:25:10
功能说明:Canvas 2D API 的接口 Path2D 用来声明路径,此路径稍后会被 CanvasRenderingContext2D 对象使用。CanvasRenderingContext2D 接口的 路径方法也存在于 Path2D 这个接口中,允许您在 Canvas 中根据需要创建可以保留并重用的路径。

属性

属性
类型
说明
width
number
使用像素描述 ImageData 的实际宽度
height
number
使用像素描述 ImageData 的实际高度
data
Uint8ClampedArray
一维数组,包含以 RGBA 顺序的数据,数据使用 0 至 255(包含)的整数表示


方法集

addPath

该 方法 使用方式为 Path2D.addPath(Path2D path)
功能说明:添加路径到当前路径。
参数及说明:Path2D path,添加的 Path2D 路径。

arc

该 方法 使用方式为 Path2D.arc(number x, number y, number radius, number startAngle, number endAngle, boolean counterclockwise)
功能说明:添加一段圆弧路径。
参数及说明:
number x:圆心横坐标。
number y:圆心纵坐标。
number radius:圆形半径,必须为正数。
number startAngle:圆弧开始角度。
number endAngle:圆弧结束角度。
boolean counterclockwise:是否逆时针绘制。如果传 true, 则会从 endAngle 开始绘制到 startAngle。

arcTo

该 方法 使用方式为 Path2D.arcTo(number x1, number y1, number x2, number y2, number radius)
功能说明:通过给定控制点添加一段圆弧路径。
数及说明:
number x1:第一个控制点横坐标。
number y1:第一个控制点纵坐标。
number x2:第二个控制点横坐标。
number y2:第二个控制点纵坐标。
number radius:圆形半径,必须为非负数。

bezierCurveTo

该 方法 使用方式为 Path2D.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
功能说明:添加三次贝塞尔曲线路径。
参数及说明
number cp1x:第一个控制点横坐标。
number cp1y:第一个控制点纵坐标。
number cp2x:第二个控制点横坐标。
number cp2y:第二个控制点纵坐标。
number x:结束点横坐标。
number y:结束点纵坐标。

closePath

该 方法 使用方式为 Path2D.closePath()
功能说明:闭合路径到起点。

ellipse

该 方法 使用方式为 Path2D.ellipse(number x, number y, number radiusX, number radiusY, number rotation, number startAngle, number endAngle, boolean counterclockwise)
功能说明:添加椭圆弧路径。
参数及说明:
number x:椭圆圆心横坐标。
number y:椭圆圆心纵坐标。
number radiusX:椭圆长轴半径,必须为非负数。
number radiusY:椭圆短轴半径,必须为非负数。
number rotation:椭圆旋转角度。
number startAngle:圆弧开始角度。
number endAngle:圆弧结束角度。
boolean counterclockwise:是否逆时针绘制。如果传 true, 则会从 endAngle 开始绘制到 startAngle。

lineTo

该 方法 使用方式为 Path2D.lineTo(number x, number y)
功能说明:添加直线路径。
参数及说明:
number x:结束点横坐标。
number y:结束点纵坐标。

moveTo

该 方法 使用方式为 Path2D.moveTo(number x, number y)
功能说明:移动路径开始点。
参数及说明:
number x:横坐标。
number y:纵坐标。

quadraticCurveTo

该 方法 使用方式为 Path2D.quadraticCurveTo(number cpx, number cpy, number x, number y)
功能说明:添加二次贝塞尔曲线路径。
参数及说明:
number cpx:控制点横坐标。
number cpy:控制点纵坐标。
number x:结束点横坐标。
number y:结束点纵坐标。

rect

该 方法 使用方式为 Path2D.rect(number x, number y, number width, number height)
功能说明:添加方形路径。
参数及说明:
number x:开始点横坐标。
number y:开始点纵坐标。
number width:方形宽度,正数向右,负数向左。
number height:方形高度,正数向下,负数向上。


帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈