从 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() 方法创建。此对象可以赋值给 fillStyle 或 strokeStyle 用于绘制
实例的方法
CanvasGradient.addColorStop(number stop, string color)
添加颜色的渐变点
参数
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
stop | number | 是 | 表示渐变中开始与结束之间的位置,范围 0-1 | |
color | number | 是 | 渐变点的颜色 |
CanvasPattern
CanvasPattern 接口表示描述一个模板(基于image, canvas或video)的不透明对象,通过 CanvasRenderingContext2D.createPattern() 方法创建。此对象可以赋值给 fillStyle 或 strokeStyle 用于绘制
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 中根据需要创建可以保留并重用的路径。一般在使用 fill 和 stroke 方法时传入
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/CanvasRenderingContext2D 、 https://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 不支持。