CanvasRenderingContext2D

展示全部

# CanvasRenderingContext2D

canvas元素的绘图2D渲染上下文, 它用于绘制形状、文本、图像和其他对象

参考：canvas组件

# CanvasRenderingContext2D 的属性值

名称类型必备默认值兼容性描述

canvas

UniCanvasElement

是

是对与给定上下文关联的HTMLCanvasElement对象的只读引用

direction

string

是

inherit

描述当前文本方向

合法值

兼容性

描述

ltr

文字方向为从左到右

rtl

文字方向为从右到左

inherit

文字方向从相应的 <canvas> 元素或 Document 继承

fillStyle

string

是

#000 (黑色)

设置填充颜色

合法值

兼容性

描述

interface

CanvasGradient 对象（线性或径向渐变）。

interface

CanvasPattern 对象（重复的图像）。

string.ColorString

同CSS颜色值。

filter

string

是

none

提供模糊、灰度等过滤效果的属性。它类似于 CSS filter 属性，并且接受相同的函数

font

string

是

10px sans-serif

指定绘制文字所使用的字体样式。使用和 CSS 字体描述符相同的字符串值。
注意App平台只支持font-size、font-family、font-weight

fontStretch

string

是

normal

指定绘制文本时字体如何被扩展或压缩。该属性对应于 CSS 中的 font-stretch 属性

合法值

兼容性

描述

ultra-condensed

指定比普通字体更紧凑的字体,对应百分比数值为50%

extra-condensed

指定比普通字体更紧凑的字体,对应百分比数值为62.5%

condensed

指定比普通字体更紧凑的字体,对应百分比数值为75%

semi-condensed

指定比普通字体更紧凑的字体,对应百分比数值为87.5%

normal

普通字体外观

semi-expanded

指定比普通字体更扩展的字体,对应百分比数值为112.5%

expanded

指定比普通字体更扩展的字体,对应百分比数值为125%

extra-expanded

指定比普通字体更扩展的字体,对应百分比数值为150%

ultra-expanded

指定比普通字体更扩展的字体,对应百分比数值为200%

globalAlpha

number

是

1.0

用来描述在 canvas 上绘图之前，设置图形和图片透明度的属性。数值的范围从 0.0（完全透明）到 1.0（完全不透明）

globalCompositeOperation

string

是

source-over

在绘制新形状时应用的合成操作的类型，其中 type 是用于标识要使用的合成或混合模式操作的字符串

合法值

兼容性

描述

source-over

在现有画布上下文之上绘制新图形

source-in

新图形只在新图形和目标画布重叠的地方绘制。其他的都是透明的

source-out

在不与现有画布内容重叠的地方绘制新图形

source-atop

新图形只在与现有画布内容重叠的地方绘制。

destination-over

在现有的画布内容后面绘制新的图形。

destination-atop

现有的画布只保留与新图形重叠的部分，新的图形是在画布内容后面绘制的。

destination-in

现有的画布内容保持在新图形和现有画布内容重叠的位置。其他的都是透明的。

destination-out

现有内容保持在新图形不重叠的地方。

lighter

两个重叠图形的颜色是通过颜色值相加来确定的。

copy

只显示新图形。

xor

图像中，那些重叠和正常绘制之外的其他地方是透明的。

multiply

将顶层像素与底层相应像素相乘，结果是一幅更黑暗的图片。

screen

像素被倒转，相乘，再倒转，结果是一幅更明亮的图片。

overlay

multiply 和 screen 的结合，原本暗的地方更暗，原本亮的地方更亮。

darken

保留两个图层中最暗的像素

lighten

保留两个图层中最亮的像素。

color-dodge

将底层除以顶层的反置。

color-burn

将反置的底层除以顶层，然后将结果反过来。

hard-light

multiply 和 screen 的结合，类似于叠加，但上下图层互换了。

soft-light

用顶层减去底层或者相反来得到一个正值。

difference

一个柔和版本的 hard-light。纯黑或纯白不会导致纯黑或纯白。

exclusion

和 difference 相似，但对比度较低。

hue

保留了底层的亮度和色度，同时采用了顶层的色调。

saturation

保留底层的亮度和色调，同时采用顶层的色度。

color

保留了底层的亮度，同时采用了顶层的色调和色度。

luminosity

保持底层的色调和色度，同时采用顶层的亮度。

imageSmoothingEnabled

boolean

是

true

用于设置是否对缩放后的图片进行平滑处理，true 表示进行平滑处理，false 表示不进行

imageSmoothingQuality

string

是

low

用于设置图像平滑度,要使此属性生效，imageSmoothingEnabled 属性必须为 true，可选值：low低质量； medium中等质量；high高质量。

合法值

兼容性

描述

low

低质量。

medium

中等质量。

high

高质量。

letterSpacing

string

是

0px

用于指定绘制文本时字母之间的间距。这对应于 CSS 中的 letter-spacing 属性

lineCap

string

是

butt

指定如何绘制每一条线条末端的属性，可选值：butt线段末端以方形结束；round线段末端以圆形结束；square线段末端以方形结束，但是会增加一个一半宽度的矩形区域。

合法值兼容性描述

butt

butt线段末端以方形结束；

round

round线段末端以圆形结束；

square

square线段末端以方形结束，但是会增加一个一半宽度的矩形区域。

lineDashOffset

number

是

0.0

设置虚线偏移量

lineJoin

string

是

miter

设置 2 个长度不为 0 的线条相连部分如何连接在一起的属性，可选值：bevel斜角；round圆角；miter尖角。

合法值

兼容性

描述

round

通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。

bevel

在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。

miter

通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置受到 miterLimit 属性的影响。默认值。

lineWidth

number

是

1.0

设置线条的宽度, 零、负数、Infinity 和 NaN 值将被忽略

miterLimit

number

是

10.0

设置斜接面限制比例的属性。当获取属性值时，会返回当前的值。当给属性赋值时，0、负数、 Infinity 和 NaN 都会被忽略；除此之外都会被赋予一个新值。

shadowBlur

number

是

用于描述模糊效果程度,其中 0 表示没有模糊，数字越大表示模糊程度越高。这个值不对应于像素数量，并且不受当前变换矩阵的影响。负数、Infinity 和 NaN 将被忽略

shadowColor

string

是

fully-transparent black

描述阴影颜色,只有当 shadowColor 属性设置为非透明值时，阴影才会被绘制。其中的 shadowBlur、shadowOffsetX 或 shadowOffsetY 属性中至少有一个必须是非零的。

shadowOffsetX

number

是

指定阴影在水平方向上的偏移距离。正值向右偏移，负值向左偏移。默认值为 0（无水平偏移）。Infinity 和 NaN 值将被忽略

shadowOffsetY

number

是

指定阴影在垂直方向上的偏移距离。正值向右偏移，负值向左偏移。默认值为 0（无水平偏移）。Infinity 和 NaN 值将被忽略

strokeStyle

string

是

#000 (黑色)

设置边框的颜色

合法值

兼容性

描述

interface

CanvasGradient 对象（线性或径向渐变）。

interface

CanvasPattern 对象（重复的图像）。

string.ColorString

同CSS颜色值。

textAlign

string

是

left

设置文本的对齐方式，可取值：left左对齐；center居中对齐；right右对齐。

合法值

兼容性

描述

left

文本左对齐。

right

文本右对齐。

center

文本居中对齐。

start

文本对齐界线开始的地方（左对齐指本地从左向右，右对齐指本地从右向左）。

end

文本对齐界线结束的地方（左对齐指本地从左向右，右对齐指本地从右向左）。

textBaseline

string

是

alphabetic

描述绘制文本时，当前文本基线的属性

合法值

兼容性

描述

top

文本基线在文本块的顶部。

hanging

文本基线是悬挂基线。

middle

文本基线在文本块的中间。

alphabetic

文本基线是标准的字母基线。默认值。

ideographic

文字基线是表意字基线；如果字符本身超出了 alphabetic 基线，那么 ideograhpic 基线位置在字符本身的底部。（用于中文、日文和韩文。）

bottom

文本基线在文本块的底部。与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。

textRendering

string

是

auto

用于在渲染文本时向渲染引擎提供应该如何优化的相关信息

合法值

兼容性

描述

auto

浏览器在绘制文本时根据情况对速度、易读性和几何精确性进行优化。

optimizeSpeed

浏览器在绘制文本时优先考虑渲染速度，而不是易读性和几何精确性。它禁用字距调整和连字。

optimizeLegibility

浏览器在绘制文本时优先考虑易读性，而不是渲染速度和几何精确性。这启用了字距调整和可选连字。

geometricPrecision

浏览器在绘制文本时优先考虑几何精确性，而不是渲染速度和易读性。字体的某些方面（例如字距调整）不会线性缩放。对于大的缩放比例，你可能会看到不太美观的文本渲染，但大小是你所期望的（不会被向上或向下舍入到底层操作系统支持的最接近的字体大小）。

wordSpacing

string

是

0px

用于指定绘制文本时单词之间的间距, 如果设置为无效或无法解析的值，则属性值将保持不变

# CanvasRenderingContext2D 兼容性

Web	Android	iOS
4.0	4.25	4.25

# CanvasRenderingContext2D 的方法

# arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void

绘制一段弧线

# arc 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
x	number	是	-	-	圆弧中心（圆心）的 x 轴坐标
y	number	是	-	-	圆弧中心（圆心）的 y 轴坐标
radius	number	是	-	-	圆弧的半径
startAngle	number	是	-	-	圆弧的起始点，x 轴方向开始计算，单位为弧度
endAngle	number	是	-	-	圆弧的终点，单位为弧度
anticlockwise	boolean	否	true	-	圆弧绘制方向，true：逆时针绘制，false：顺时针绘制。

# arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void

根据控制点和半径绘制圆弧路径，使用当前的描点 (前一个 moveTo 或 lineTo 等函数的止点)。根据当前描点与给定的控制点 1 连接的直线，和控制点 1 与控制点 2 连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径

# arcTo 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
x1	number	是	-	-	第一个控制点的 x 轴坐标
y1	number	是	-	-	第一个控制点的 y 轴坐标
x2	number	是	-	-	第二个控制点的 x 轴坐标
y2	number	是	-	-	第二个控制点的 y 轴坐标
radius	number	是	-	-	圆弧的半径

# beginPath(): void

开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

# beginPath 兼容性

Web	Android	iOS
4.0	4.25	4.25

# bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void

绘制三次贝赛尔曲线路径

# bezierCurveTo 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
cp1x	number	是	-	-	第一个控制点的 x 轴坐标
cp1y	number	是	-	-	第一个控制点的 y 轴坐标
cp2x	number	是	-	-	第二个控制点的 x 轴坐标
cp2y	number	是	-	-	第二个控制点的 y 轴坐标
x	number	是	-	-	结束点的 x 轴坐标
y	number	是	-	-	结束点的 y 轴坐标

# clearRect(x: number, y: number, width: number, height: number): void

清除画布上在该矩形区域内的内容

# clearRect 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
x	number	是	-	-	矩形起点的 x 轴坐标
y	number	是	-	-	矩形起点的 y 轴坐标
width	number	是	-	-	矩形的宽度
height	number	是	-	-	矩形的高度

# clip(): void

将当前创建的路径设置为当前剪切路径

# clip 兼容性

Web	Android	iOS
4.0	4.25	4.25

# clip(path: Path2D): void

将当前创建的路径设置为当前剪切路径

# clip 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称

类型

必填

默认值

兼容性

描述

path

Path2D

是

Path2D用来声明路径，用来在canvas中根据需要创建可以保留并重用的路径, 此路径会被CanvasRenderingContext2D对象使用

# clip(fillRule: string): void

将当前创建的路径设置为当前剪切路径

# clip 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称	类型	必填	默认值	兼容性	描述
fillRule	string	是	-	-	-

# clip(path: Path2D, fillRule: string): void

将当前创建的路径设置为当前剪切路径

# clip 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称

类型

必填

默认值

兼容性

描述

path

Path2D

是

Path2D用来声明路径，用来在canvas中根据需要创建可以保留并重用的路径, 此路径会被CanvasRenderingContext2D对象使用

fillRule

string

是

# closePath(): void

关闭一个路径

# closePath 兼容性

Web	Android	iOS
4.0	4.25	4.25

# createImageData(width: number, height: number): void

创建一个新的、空白的、指定大小的 ImageData 对象。所有的像素在新对象中都是透明的黑色

# createImageData 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称	类型	必填	默认值	兼容性	描述
width	number	是	-	-	-
height	number	是	-	-	-

# createPattern(image: Image, repetition: string): CanvasPattern

对指定的图像创建模式的方法，可在指定的方向上重复元图像

# createPattern 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称

类型

必填

默认值

兼容性

描述

image

Image

是

重复的图像源，支持代码包路径和本地临时路径 (本地路径)

名称

类型

必备

默认值

兼容性

描述

src

string

是

图片url

repetition

string

是

如何重复图像

# Image 的方法

# onload(): void | null

图片加载完成事件

# onload 兼容性

Web	Android	iOS	iOS uni-app x UTS 插件
4.0	4.25	4.25	x

# 返回值

类型	描述
CanvasPattern	接口表示一个不透明对象，描述了一个基于图像、画布或视频的模板，该模板通过 CanvasRenderingContext2D.createPattern() 方法创建

# createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient

创建一个线性的渐变颜色。返回的CanvasGradient对象需要使用 CanvasGradient.addColorStop() 来指定渐变点，至少要两个

# createLinearGradient 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
x0	number	是	-	-	起点的 x 坐标
y0	number	是	-	-	起点的 y 坐标
x1	number	是	-	-	终点的 x 坐标
y1	number	是	-	-	终点的 y 坐标

# 返回值

类型	描述
CanvasGradient	表示描述渐变的不透明对象。该接口通过 CanvasRenderingContext2D.createLinearGradient()、 CanvasRenderingContext2D.createConicGradient() 或 CanvasRenderingContext2D.createRadialGradient() 方法返回

# CanvasGradient 的方法

# addColorStop(stop: number, color: string): void

添加颜色的渐变点。小于最小 stop 的部分会按最小 stop 的 color 来渲染，大于最大 stop 的部分会按最大 stop 的 color 来渲染

# addColorStop 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
stop	number	是	-	-	表示渐变中开始与结束之间的位置，范围 0-1
color	string	是	-	-	渐变点的颜色

# createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r01: number): CanvasGradient

根据参数确定两个圆的坐标，绘制放射性渐变。注意App平台和Web平台绘制效果有差异

# createRadialGradient 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
x0	number	是	-	-	开始圆形的 x 轴坐标
y0	number	是	-	-	开始圆形的 y 轴坐标
r0	number	是	-	-	开始圆形的半径
x1	number	是	-	-	结束圆形的 x 轴坐标
y1	number	是	-	-	结束圆形的 y 轴坐标
r01	number	是	-	-	结束圆形的半径

# 返回值

类型	描述
CanvasGradient	表示描述渐变的不透明对象。该接口通过 CanvasRenderingContext2D.createLinearGradient()、 CanvasRenderingContext2D.createConicGradient() 或 CanvasRenderingContext2D.createRadialGradient() 方法返回

# CanvasGradient 的方法

# addColorStop(stop: number, color: string): void

添加颜色的渐变点。小于最小 stop 的部分会按最小 stop 的 color 来渲染，大于最大 stop 的部分会按最大 stop 的 color 来渲染

# addColorStop 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
stop	number	是	-	-	表示渐变中开始与结束之间的位置，范围 0-1
color	string	是	-	-	渐变点的颜色

# draw(): void

将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中, 该操作为可选非web标准，canvas组件会自动选择合适时机进行绘制

# draw 兼容性

Web	Android	iOS
4.0	4.25	4.25

# drawImage(imageResource: Image, sx: number, sy: number): void

绘制图像到画布

# drawImage 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称

类型

必填

默认值

兼容性

描述

imageResource

Image

是

所要绘制的图片资源

名称

类型

必备

默认值

兼容性

描述

src

string

是

图片url

number

是

需要绘制到画布中的，imageResource的矩形（裁剪）选择框的左上角 x 坐标

number

是

需要绘制到画布中的，imageResource的矩形（裁剪）选择框的左上角 y 坐标

# Image 的方法

# onload(): void | null

图片加载完成事件

# onload 兼容性

Web	Android	iOS	iOS uni-app x UTS 插件
4.0	4.25	4.25	x

# drawImage(imageResource: Image, sx: number, sy: number, sWidth: number, sHeight: number): void

# drawImage 兼容性

Web	Android	iOS
-	-	-

# 参数

名称

类型

必填

默认值

兼容性

描述

imageResource

Image

是

image对象, 用于 canvas 绘制

名称

类型

必备

默认值

兼容性

描述

src

string

是

图片url

number

是

number

是

sWidth

number

是

sHeight

number

是

# Image 的方法

# onload(): void | null

图片加载完成事件

# onload 兼容性

Web	Android	iOS	iOS uni-app x UTS 插件
4.0	4.25	4.25	x

# drawImage(imageResource: Image, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number): void

# drawImage 兼容性

Web	Android	iOS
-	-	-

# 参数

名称

类型

必填

默认值

兼容性

描述

imageResource

Image

是

image对象, 用于 canvas 绘制

名称

类型

必备

默认值

兼容性

描述

src

string

是

图片url

number

是

number

是

sWidth

number

是

sHeight

number

是

number

是

number

是

dWidth

number

是

dHeight

number

是

# Image 的方法

# onload(): void | null

图片加载完成事件

# onload 兼容性

Web	Android	iOS	iOS uni-app x UTS 插件
4.0	4.25	4.25	x

# ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: boolean): void

添加椭圆路径。椭圆的圆心在（x,y）位置，半径分别是radiusX 和 radiusY，按照anticlockwise（默认顺时针）指定的方向，从 startAngle 开始绘制，到 endAngle 结束

# ellipse 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称	类型	必填	默认值	兼容性	描述
x	number	是	-	-	椭圆圆心的 x 轴（水平）坐标
y	number	是	-	-	椭圆圆心的 y 轴（垂直）坐标
radiusX	number	是	-	-	椭圆长轴的半径。必须为非负数
radiusY	number	是	-	-	椭圆短轴的半径。必须为非负数。
rotation	number	是	-	-	椭圆的旋转角度，以弧度表示。
startAngle	number	是	-	-	椭圆弧的起始偏心角，从正 x 轴沿顺时针测量，用弧度表示。
endAngle	number	是	-	-	椭圆弧的结束偏心角，从正 x 轴沿顺时针测量，用弧度表示。
anticlockwise	boolean	是	-	-	一个可选的布尔值，如果为 true，则逆时针绘制椭圆弧。默认值为 false（顺时针）。

# fill(): void

对当前路径中的内容进行填充

# fill 兼容性

Web	Android	iOS
4.0	4.25	4.25

# fill(fillRule: "nonzero" | "evenodd"): void

对当前路径中的内容进行填充

# fill 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称

类型

必填

默认值

兼容性

描述

fillRule

string

是

填充当前或已存在的路径的方法。采取非零环绕(nonzero)或者奇偶环绕(evenodd)规则

合法值	兼容性	描述
nonzero	-	-
evenodd	-	-

# fill(path: Path2D): void

对指定路径中的内容进行填充

# fill 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称

类型

必填

默认值

兼容性

描述

path

Path2D

是

填充路径

# fill(path: Path2D, fillRule: "nonzero" | "evenodd"): void

对指定路径中的内容进行填充

# fill 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称

类型

必填

默认值

兼容性

描述

path

Path2D

是

填充路径

fillRule

string

是

填充当前或已存在的路径的方法。采取非零环绕(nonzero)或者奇偶环绕(evenodd)规则

合法值	兼容性	描述
nonzero	-	-
evenodd	-	-

# fillRect(x: number, y: number, width: number, height: number): void

填充一个矩形。用 setFillStyle 设置矩形的填充色，如果没设置默认是黑色

# fillRect 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
x	number	是	-	-	矩形起点的 x 轴坐标
y	number	是	-	-	矩形起点的 y 轴坐标
width	number	是	-	-	矩形的宽度
height	number	是	-	-	矩形的高度

# fillText(text: string, x: number, y: number, maxWidth?: number): void

在画布上绘制文本

# fillText 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
text	string	是	-	-	要渲染的文本字符串
x	number	是	-	-	开始绘制文本的点的 X 轴坐标
y	number	是	-	-	开始绘制文本的点的 X 轴坐标
maxWidth	number	否	-	-	需要绘制的最大宽度

# getImageData(sx: number, sy: number, sw: number, sh: number): ImageData

返回一个ImageData对象，用来描述 canvas 区域隐含的像素数据，这个区域通过矩形表示，起始点为*(sx, sy)、宽为sw、高为sh。

# getImageData 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
sx	number	是	-	-	将要被提取的图像数据矩形区域的左上角 x 坐标
sy	number	是	-	-	将要被提取的图像数据矩形区域的左上角 y 坐标
sw	number	是	-	-	将要被提取的图像数据矩形区域的宽度
sh	number	是	-	-	将要被提取的图像数据矩形区域的高度

# 返回值

类型

描述

ImageData

描述canvas元素的一个隐含像素数据的区域

名称	类型	必备	默认值	兼容性	描述
data	Uint8ClampedArray	是	-	-	-
width	number	是	-	-	-
height	number	是	-	-	-

# isContextLost(): Boolean

返回一个Boolean 标记上下文是否已经丢失

# isContextLost 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 返回值

类型
Boolean

# isPointInPath(x: number, y: number): boolean

判断在当前路径中是否包含检测点

# isPointInPath 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称	类型	必填	默认值	兼容性	描述
x	number	是	-	-	检测点的 X 坐标
y	number	是	-	-	检测点的 Y 坐标

# 返回值

类型
boolean

# isPointInPath(x: number, y: number, fillRule: string): boolean

判断在当前路径中是否包含检测点

# isPointInPath 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称	类型	必填	默认值	兼容性	描述
x	number	是	-	-	检测点的 X 坐标
y	number	是	-	-	检测点的 Y 坐标
fillRule	string	是	-	-	用来决定点在路径内还是在路径外的算法

# 返回值

类型
boolean

# isPointInPath(path: Path2D, x: number, y: number): boolean

判断在当前路径中是否包含检测点

# isPointInPath 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称

类型

必填

默认值

兼容性

描述

path

Path2D

是

Path2D应用的路径

number

是

检测点的 X 坐标

number

是

检测点的 Y 坐标

# 返回值

类型
boolean

# isPointInPath(path: Path2D, x: number, y: number, fillRule: string): boolean

判断在当前路径中是否包含检测点

# isPointInPath 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称

类型

必填

默认值

兼容性

描述

path

Path2D

是

Path2D应用的路径

number

是

检测点的 X 坐标

number

是

检测点的 Y 坐标

fillRule

string

是

用来决定点在路径内还是在路径外的算法

# 返回值

类型
boolean

# isPointInStroke(x: number, y: number): boolean

检测某点是否在路径的描边线

# isPointInStroke 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称	类型	必填	默认值	兼容性	描述
x	number	是	-	-	检测点的 X 坐标
y	number	是	-	-	检测点的 Y 坐标

# 返回值

类型
boolean

# getLineDash(): Array<number>

在填充线时使用虚线模式, 它使用一组值来指定描述模式的线和间隙的交替长度。注意App平台和Web平台绘制效果有差异

# getLineDash 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 返回值

类型
number[]

# lineTo(x: number, y: number): void

增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条

# lineTo 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
x	number	是	-	-	目标位置的 x 坐标
y	number	是	-	-	目标位置的 y 坐标

# measureText(text: string): TextMetrics

测量文本尺寸信息。目前仅返回文本宽度

# measureText 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
text	string	是	-	-	要渲测量的文本字符串

# 返回值

类型

描述

TextMetrics

表示文本的尺寸，通过 CanvasRenderingContext2D.measureText() 方法创建

名称	类型	必备	默认值	兼容性	描述
width	number	是	-	-	-

# moveTo(x: number, y: number): void

把路径移动到画布中的指定点

# moveTo 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
x	number	是	-	-	目标位置的 x 坐标
y	number	是	-	-	目标位置的 y 坐标

# putImageData(imageData: ImageData, x: number, y: number): boolean

将数据从已有的 ImageData 对象绘制到位图的方法。如果提供了一个绘制过的矩形，则只绘制该矩形的像素。此方法不受画布转换矩阵的影响

# putImageData 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称

类型

必填

默认值

兼容性

描述

imageData

ImageData

是

包含像素值的数组对象

名称	类型	必备	默认值	兼容性	描述
data	Uint8ClampedArray	是	-	-	-
width	number	是	-	-	-
height	number	是	-	-	-

number

是

源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）

number

是

源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）

# 返回值

类型
boolean

# putImageData(imageData: ImageData, x: number, y: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): boolean

将数据从已有的 ImageData 对象绘制到位图的方法。如果提供了一个绘制过的矩形，则只绘制该矩形的像素。此方法不受画布转换矩阵的影响

# putImageData 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称

类型

必填

默认值

兼容性

描述

imageData

ImageData

是

包含像素值的数组对象

名称	类型	必备	默认值	兼容性	描述
data	Uint8ClampedArray	是	-	-	-
width	number	是	-	-	-
height	number	是	-	-	-

number

是

源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量）

number

是

源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量）

dirtyX

number

是

在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（x 坐标）

dirtyY

number

是

在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（y 坐标）

dirtyWidth

number

是

在源图像数据中，矩形区域的宽度。默认是图像数据的宽度）

dirtyHeight

number

是

在源图像数据中，矩形区域的高度。默认是图像数据的高度

# 返回值

类型
boolean

# quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void

创建二次贝塞尔曲线路径

# quadraticCurveTo 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
cpx	number	是	-	-	贝塞尔控制点的 x 坐标
cpy	number	是	-	-	贝塞尔控制点的 y 坐标
x	number	是	-	-	结束点的 x 坐标
y	number	是	-	-	结束点的 y 坐标

# rect(x: number, y: number, width: number, height: number): void

创建一个矩形路径

# rect 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
x	number	是	-	-	矩形路径起点的 x 轴坐标
y	number	是	-	-	矩形路径起点的 y 轴坐标
width	number	是	-	-	矩形路径的宽度
height	number	是	-	-	矩形路径的高度

# resetTransform(): void

使用单位矩阵重新设置当前变换

# resetTransform 兼容性

Web	Android	iOS
4.0	4.25	4.25

# restore(): void

恢复之前保存的绘图上下文

# restore 兼容性

Web	Android	iOS
4.0	4.25	4.25

# rotate(rotate: number): void

以原点为中心顺时针旋转当前坐标轴

# rotate 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
rotate	number	是	-	-	，以弧度计 degrees * Math.PI/180；degrees 范围为 0-360

# roundRect(x: number, y: number, width: number, height: number, radii: any): boolean

在当前路径中添加一个圆角矩形

# roundRect 兼容性

Web	Android	iOS
4.0	x	x

# 参数

名称	类型	必填	默认值	兼容性	描述
x	number	是	-	-	包含像素值的数组对象
y	number	是	-	-	矩形起点的 x 轴坐标，以像素为单位
width	number	是	-	-	矩形起点的 y 轴坐标，以像素为单位
height	number	是	-	-	矩形的宽度。正值向右，负值向左
radii	any	是	-	-	矩形的高度。正值向下，负值向上

# 返回值

类型
boolean

# save(): void

保存绘图上下文

# save 兼容性

Web	Android	iOS
4.0	4.25	4.25

# scale(x: number, y: number): void

缩放变换

# scale 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
x	number	是	-	-
y	number	是	-	-

# setLineDash(segments: Array<number>): void

在填充线时使用虚线模式, 它使用一组值来指定描述模式的线和间隙的交替长度。

# setLineDash 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
segments	number[]	是	-	-	<number>一组描述交替绘制线段和间距（坐标空间单位）长度的数字

# setTransform(scaleX: Number, skewY: Number, skewX: Number, scaleY: Number, translateX: Number, translateY: Number): void

使用单位矩阵重新设置（覆盖）当前的变换并调用变换

# setTransform 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
scaleX	Number	是	-	-	水平缩放
skewY	Number	是	-	-	垂直倾斜
skewX	Number	是	-	-	水平倾斜
scaleY	Number	是	-	-	垂直缩放
translateX	Number	是	-	-	水平移动
translateY	Number	是	-	-	垂直移动

# stroke(): void

画出当前路径的边框。默认颜色色为黑色

# stroke 兼容性

Web	Android	iOS
4.0	4.25	4.25

# stroke(path: Path2D): void

画出指定路径的边框。默认颜色色为黑色

# stroke 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称

类型

必填

默认值

兼容性

描述

path

Path2D

是

# strokeRect(x: number, y: number, width: number, height: number): void

画一个矩形(非填充)

# strokeRect 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
x	number	是	-	-	矩形起点的 x 轴坐标
y	number	是	-	-	矩形起点的 y 轴坐标
width	number	是	-	-	矩形的宽度
height	number	是	-	-	矩形的高度

# strokeText(text: string, x: number, y: number, maxWidth?: number): void

文本描边

# strokeText 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
text	string	是	-	-	要渲染的文本字符串
x	number	是	-	-	开始绘制文本的点的 X 轴坐标
y	number	是	-	-	开始绘制文本的点的 X 轴坐标
maxWidth	number	否	-	-	需要绘制的最大宽度

# transform(scaleX: Number, skewY: number, skewX: number, scaleY: number, translateX: number, translateY: number): void

使用矩阵多次叠加当前变换，矩阵由方法的参数进行描述。可以缩放、旋转、移动和倾斜上下文

# transform 兼容性

Web	Android	iOS
4.0	4.25	4.25

# 参数

名称	类型	必填	默认值	兼容性	描述
scaleX	Number	是	-	-	水平缩放
skewY	number	是	-	-	垂直倾斜
skewX	number	是	-	-	水平倾斜
scaleY	number	是	-	-	垂直缩放
translateX	number	是	-	-	水平移动
translateY	number	是	-	-	垂直移动