Path2D.bezierCurveTo方法

基础库 2.11.0 开始支持,低版本需做兼容处理。

微信小程序插件:不支持

相关文档: 画布指南、canvas 组件介绍

功能描述

添加三次贝塞尔曲线路径。

参数

number cp1x

第一个控制点横坐标。

number cp1y

第一个控制点纵坐标。

number cp2x

第二个控制点横坐标。

number cp2y

第二个控制点纵坐标。

number x

结束点横坐标。

number y

结束点纵坐标。

Path2D.arcTo方法

基础库 2.11.0 开始支持,低版本需做兼容处理。

微信小程序插件:不支持

相关文档: 画布指南、canvas 组件介绍

功能描述

通过给定控制点添加一段圆弧路径。

参数

number x1

第一个控制点横坐标。

number y1

第一个控制点纵坐标。

number x2

第二个控制点横坐标。

number y2

第二个控制点纵坐标。

number radius

圆形半径,必须为非负数。

Path2D.arc方法

基础库 2.11.0 开始支持,低版本需做兼容处理。

微信小程序插件:不支持

相关文档: 画布指南、canvas 组件介绍

功能描述

添加一段圆弧路径。

参数

number x

圆心横坐标。

number y

圆心纵坐标。

number radius

圆形半径,必须为正数。

number startAngle

圆弧开始角度。

number endAngle

圆弧结束角度。

boolean counterclockwise

是否逆时针绘制。如果传 true, 则会从 endAngle 开始绘制到 startAngle。

Path2D

基础库 2.11.0 开始支持,低版本需做兼容处理。

相关文档: 画布指南、canvas 组件介绍

Canvas 2D API 的接口 Path2D 用来声明路径,此路径稍后会被CanvasRenderingContext2D 对象使用。CanvasRenderingContext2D 接口的 路径方法 也存在于 Path2D 这个接口中,允许你在 canvas 中根据需要创建可以保留并重用的路径。

方法

Path2D.addPath(Path2D path)

添加路径到当前路径。

Path2D.arc(number x, number y, number radius, number startAngle, number endAngle, boolean counterclockwise)

添加一段圆弧路径。

Path2D.arcTo(number x1, number y1, number x2, number y2, number radius)

通过给定控制点添加一段圆弧路径。

Path2D.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)

添加三次贝塞尔曲线路径。

Path2D.closePath()

闭合路径到起点。

Path2D.ellipse(number x, number y, number radiusX, number radiusY, number rotation, number startAngle, number endAngle, boolean counterclockwise)

添加椭圆弧路径

Path2D.lineTo(number x, number y)

添加直线路径

Path2D.moveTo(number x, number y)

移动路径开始点

Path2D.quadraticCurveTo(number cpx, number cpy, number x, number y)

添加二次贝塞尔曲线路径。

Path2D.rect(number x, number y, number width, number height)

添加方形路径。

RenderingContextOffscreenCanvas.getContext(string contextType)

基础库 2.7.0 开始支持,低版本需做兼容处理。

微信小程序插件:支持,需要微信小程序基础库版本不低于 2.16.1

相关文档: 画布指南、canvas 组件介绍

功能描述

这个方法会返回 OffscreenCanvas 的绘图上下文

参数

string contextType

绘图上下文的类型,需要和调用 createOffscreenCanvas 时传入的 type 保持一致

contextType 可以填的值

值 说明 最低版本
webgl webgl 类型的上下文
2d 2d 类型的上下文 2.16.1

返回值

RenderingContext

注意:webgl 和 2d 这两种绘图上下文不能混着用,传入的 contextType 必须和 wx.createOffscreenCanvas 传入的 type 类型一致。

ImageOffscreenCanvas.createImage()

基础库 2.7.3 开始支持,低版本需做兼容处理。

微信小程序插件:支持,需要微信小程序基础库版本不低于 2.16.1

相关文档: 画布指南、canvas 组件介绍

功能描述

创建一个图片对象。支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。

返回值

Image

注意不允许混用 webgl 和 2d 画布创建的图片对象,使用时请注意尽量使用 canvas 自身的 createImage 创建图片对象。

OffscreenCanvas

基础库 2.7.0 开始支持,低版本需做兼容处理。

相关文档: 画布指南、canvas 组件介绍

离屏 canvas 实例,可通过 wx.createOffscreenCanvas 创建。

属性

number width

画布宽度

number height

画布高度

方法

RenderingContext OffscreenCanvas.getContext(string contextType)

该方法返回 OffscreenCanvas 的绘图上下文

Image OffscreenCanvas.createImage()

创建一个图片对象。支持在 2D Canvas 和 WebGL Canvas 下使用, 但不支持混用 2D 和 WebGL 的方法。

ImageData

基础库 2.9.0 开始支持,低版本需做兼容处理。

相关文档: 画布指南、canvas 组件介绍

ImageData 对象

属性

number width

用像素表示 ImageData 的实际宽度

number height

用像素表示 ImageData 的实际高度

Uint8ClampedArray data

一个一维数组,按 RGBA 顺序存放数据,每个数值是 0 到 255(含 0 和 255)之间的整数

图片

基础库 2.7.0 开始支持,低版本需做兼容处理。

相关文档: 画布指南、canvas 组件介绍

图片对象

属性

string src

图片的 URL。v2.11.0 起支持传递 base64 Data URI

number width

图片的真实宽度

number height

图片的真实高度

string referrerPolicy

基础库 2.13.0 开始支持,低版本需做兼容处理。

origin: 发送完整的referrer; no-referrer: 不发送。格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为微信小程序的 appid,{version} 为微信小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本;

function onload

图片加载完成后触发的回调函数

function onerror

图片加载发生错误后触发的回调函数