画布

从 2.0.7 版本开始支持

Canvas

Canvas 实例,可通过 SelectorQuery 获取

实例的属性

number width

画布宽度

number height

画布高度

实例的方法

RenderingContext Canvas.getContext(string contextType)

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

参数

属性 类型 默认值 必填 说明
contextType string 上下文类型

注意

1.仅支持2d绘图上下文

Image Canvas.createImage()

创建一个图片对象。 支持在 2D Canvas 下使用

Path2D Canvas.createPath2D(Path2D path)

创建 Path2D 对象

参数

属性 类型 默认值 必填 说明
path Path2D 基于的path2d数据



CanvasGradient

渐变对象,由 CanvasRenderingContext2D.createLinearGradient()CanvasRenderingContext2D.createRadialGradient() 方法创建。此对象可以赋值给 fillStylestrokeStyle 用于绘制

实例的方法

CanvasGradient.addColorStop(number stop, string color)

添加颜色的渐变点

参数

属性 类型 默认值 必填 说明
stop number 表示渐变中开始与结束之间的位置,范围 0-1
color number 渐变点的颜色



CanvasPattern

CanvasPattern 接口表示描述一个模板(基于image, canvas或video)的不透明对象,通过 CanvasRenderingContext2D.createPattern() 方法创建。此对象可以赋值给 fillStylestrokeStyle 用于绘制



Image

图片对象,由 Canvas.createImage 方法创建

实例的属性

string src

图片的 URL,支持URI、base64

number width

图片的真实宽度

number height

图片的真实高度

function onload

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

function onerror

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



ImageData

ImageData 对象,由 CanvasRenderingContext2D.createImageData 方法创建,在处理 像素控制 时会使用该对象

实例的属性

Uint8ClampedArray data

只读。一维数组,包含以 RGBA 顺序的数据,数据使用 0 至 255(包含)的整数表示

number width

只读。无符号长整型(unsigned long),使用像素描述 ImageData 的实际宽度

number height

只读。无符号长整型(unsigned long),使用像素描述 ImageData 的实际高度



Path2D

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



RenderingContext

Canvas 绘图上下文,RenderingContext 是抽象的对象,具体的实现有:CanvasRenderingContext2D

通过 Canvas.getContext(‘2d’) 接口可以获取 CanvasRenderingContext2D 对象,实现了 HTML Canvas2DContext 定义的属性、方法。

CanvasRenderingContext2D 接口是Canvas API的一部分,可为 canvas 元素的绘图表面提供2D渲染上下文。 它用于绘制形状,文本,图像和其他对象

注释

1.参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2Dhttps://www.w3.org/TR/2dcontext/
2.CanvasRenderingContext2D 的以下方法不支持:addHitRegion、clearHitRegions、removeHitRegion、createConicGradient、isContextLost、scrollPathIntoView、getImageData、putImageData、getLineDash、getTransform、drawFocusIfNeeded、isPointInPath、isPointInStroke。
3.CanvasRenderingContext2D 的以下属性不支持:currentTransform。
4.CanvasRenderingContext2D 的 measureText 方法目前只支持根据字体大小进行测量,故设置字体样式、对齐方式等属性不会改变文本的测量数据。
5.CanvasRenderingContext2D 的 drawImage、createPattern 方法入参目前只支持 Image 对象。
6.iOS 不支持 globalCompositeOperation 的 color-burn。
7.Path2D 的 addPath 方法只支持一个入参,第二个入参 transform 不支持。