ESCanvasComponent

绘图API参考

绘图API属性方法及说明汇总

方法名	说明
destoryView	销毁方法
drawAction	调用绘制后必填方法
drawFinish	指令完成后，用于清除指令方法，建议调用
clearRect	清除画布上在该矩形区域内的内容
fillStyle	绘制颜色样式例如 '#ff0000' 或者 'rgb(188,219,236)'
fillRect	绘制矩形的长宽高
strokeStyle	设置边框颜色
strokeRect	画一个非填充矩形
fillText	填充文本
strokeText	给定的 (x, y) 位置绘制文本描边的方法
lineWidth	设置线条的宽度
lineCap	设置线条的端点样式 'butt'(默认)、'round'、'square'
lineJoin	设置线条的交点样式 'bevel'、'round'、'miter'(默认)
font	设置当前字体样式的属性符合 CSS font 语法的 DOMString 字符串。默认值为 10px sans-serif
textAlign	设置文字的对齐方式 'start'(默认),'end','left','center','right'
textBaseline	设置文字的水平对齐 'alphabetic'(默认),'middle','top','hanging','bottom','ideographic'
beginPath	开始创建一个新路径
closePath	封闭一个路径
moveTo	把路径移动到画布中的指定点
lineTo	使用直线连接子路径的终点到 x，y 坐标
bezierCurveTo	绘制三次贝赛尔曲线路径
quadraticCurveTo	创建二次贝塞尔曲线路径
arc	画一条弧线
arcTo	根据控制点和半径绘制圆弧路径
fill	对当前路径中的内容进行填充
stroke	画出当前路径的边框
clip	将当前创建的路径设置为当前剪切路径
rotate	顺时针旋转当前坐标轴
scale	据 x 水平方向和 y 垂直方向，为 canvas 单位添加缩放变换。
setTransform	使用矩阵重新设置（覆盖）当前变换的方法
transform	使用矩阵多次叠加当前变换
translate	对当前坐标系的原点(0, 0)进行变换
globalAlpha	设置全局画笔透明度
restore	恢复之前保存的绘图上下文
save	保存当前的绘图上下文
setLineDash	设置虚线样式的方法
lineDashOffset	设置虚线偏移量的属性
globalCompositeOperation	设置要在绘制新形状时应用的合成操作的类型。
shadowBlur	阴影的模糊级别，数值越大越模糊，默认值为 0
shadowColor	可以转换成 CSS值的 DOMString 字符串。默认值是 fully-transparent black.
shadowOffsetX	阴影水平偏移距离的 float 类型的值。默认值是 0。
shadowOffsetY	阴影垂直偏移距离的 float 类型的值。默认值是 0。
CanvasGradient	渐变对象，通过 new CanvasGradient() 创建
addColorStop	该方法在 CanvasGradient 对象上添加一个由偏移值和颜色值指定的断点

方法和属性

绘制矩形

clearRect()

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

语法

ctx.clearRect(x, y, width, height);

参数

参数	类型	描述
x	`<number>`	矩形区域左上角的 x 坐标
y	`<number>`	矩形区域左上角的 y 坐标
width	`<number>`	矩形区域的宽度
height	`<number>`	矩形区域的高度

fillRect()

填充一个矩形

语法

ctx.fillRect(x, y, width, height);

参数

参数	类型	描述
x	`<number>`	矩形路径左上角的 x 坐标
y	`<number>`	矩形路径左上角的 y 坐标
width	`<number>`	矩形路径的宽度
height	`<number>`	矩形路径的高度

strokeRect()

画一个非填充矩形

语法

ctx.strokeRect(x, y, width, height);

参数

参数	类型	描述
x	`<number>`	矩形路径左上角的 x 坐标
y	`<number>`	矩形路径左上角的 y 坐标
width	`<number>`	矩形路径的宽度
height	`<number>`	矩形路径的高度

绘制文本

fillText()

填充文本

语法

ctx.fillText(text, x, y)

参数

参数	类型	描述
text	`<string>`	在画布上输出的文本
x	`<number>`	绘制文本的左上角 x 坐标位置
y	`<number>`	绘制文本的左上角 y 坐标位置

strokeText()

给定的 (x, y) 位置绘制文本描边的方法

语法

ctx.strokeText(text, x, y);

参数

参数	类型	描述
text	`<string>`	要绘制的文本
x	`<number>`	文本起始点的 x 轴坐标
y	`<number>`	文本起始点的 y 轴坐标

线型

lineWidth

设置线条的宽度

语法

ctx.lineWidth(lineWidth);

参数

参数	类型	描述
lineWidth	`<number>`	线条的宽度

lineCap

设置线条的端点样式

语法

ctx.lineCap(lineCap);

参数

参数	类型	描述
lineCap	`<string>`	'butt'(默认)、'round'、'square'

lineJoin

设置线条的交点样式

语法

ctx.lineJoin(lineJoin);

参数

参数	类型	描述
lineJoin	`<string>`	'bevel'、'round'、'miter'(默认)

文本样式

font

设置当前字体样式的属性

语法

ctx.font(value);

参数

参数	类型	描述
value	`<string>`	符合 CSS font 语法的 DOMString 字符串。默认值为 10px sans-serif

textAlign

设置文字的对齐方式

语法

ctx.textAlign(align);

参数

参数	类型	描述
align	`<string>`	'start'(默认),'end','left','center','right'

textBaseline

设置文字的水平对齐

语法

ctx.textBaseline(textBaseline);

参数

参数	类型	描述
textBaseline	`<string>`	'alphabetic'(默认),'middle','top','hanging','bottom','ideographic'

填充和描边样式

fillStyle

设置填充色

语法

ctx.fillStyle(color);
ctx.fillStyle(gradient);

参数

参数	类型	描述
color	`<string>`	CSS color
gradient	`CanvasGradient`	CanvasGradient 对象，可通过 new CanvasGradient(x0, y0, x1, y1)方法创建

strokeStyle

设置边框颜色

语法

ctx.strokeStyle(color);
ctx.strokeStyle(gradient);

参数

参数	类型	描述
color	`<string>`	CSS color
gradient	`CanvasGradient`	CanvasGradient 对象，可通过 new CanvasGradient(x0, y0, x1, y1)方法创建

渐变和图案

CanvasGradient

创建一个线性的渐变颜色

语法

const gradient = new CanvasGradient(x0, y0, x1, y1);

参数

参数	类型	描述
x0	`<number>`	起点的 x 坐标
y0	`<number>`	起点的 y 坐标
x1	`<number>`	终点的 x 坐标
y1	`<number>`	终点的 y 坐标

路径

beginPath()

开始创建一个新路径

语法

ctx.beginPath();

closePath()

封闭一个路径

语法

ctx.closePath();

moveTo()

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

语法

ctx.moveTo(x, y);

参数

参数	类型	描述
x	`<number>`	目标位置的 x 坐标
y	`<number>`	目标位置的 y 坐标

lineTo()

使用直线连接子路径的终点到 x，y 坐标

语法

ctx.lineTo(x, y);

参数

参数	类型	描述
x	`<number>`	目标位置的 x 坐标
y	`<number>`	目标位置的 y 坐标

bezierCurveTo()

绘制三次贝赛尔曲线路径

语法

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

参数

参数	类型	描述
cp1x	`<number>`	第一个贝塞尔控制点的 x 坐标
cp1y	`<number>`	第一个贝塞尔控制点的 y 坐标
cp2x	`<number>`	第二个贝塞尔控制点的 x 坐标
cp2y	`<number>`	第二个贝塞尔控制点的 y 坐标
x	`<number>`	结束点的 x 坐标
y	`<number>`	结束点的 y 坐标

quadraticCurveTo()

创建二次贝塞尔曲线路径

语法

ctx.quadraticCurveTo(cpx, cpy, x, y);

参数

参数	类型	描述
cpx	`<number>`	贝塞尔控制点的 x 坐标
cpy	`<number>`	贝塞尔控制点的 y 坐标
x	`<number>`	结束点的 x 坐标
y	`<number>`	结束点的 y 坐标

arc()

画一条弧线

语法

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

参数

参数	类型	描述
x	`<number>`	圆的 x 坐标
y	`<number>`	圆的 y 坐标
radius	`<number>`	圆的半径
startAngle	`<number>`	起始弧度， x 轴方向开始计算，单位以弧度表示。
endAngle	`<number>`	终止弧度
anticlockwise	Boolean	可选。如果为 true，逆时针绘制圆，反之，顺时针绘制

arcTo()

根据控制点和半径绘制圆弧路径

语法

ctx.arcTo(x1, y1, x2, y2, radius);

参数

参数	类型	描述
x1	`<number>`	第一个控制点的 x 轴坐标
y1	`<number>`	第一个控制点的 y 轴坐标
x2	`<number>`	第二个控制点的 x 轴坐标
y2	`<number>`	第二个控制点的 y 轴坐标
radius	`<number>`	圆弧的半径

rect()

创建一个矩形

语法

ctx.rect(x, y, width, height);

参数

参数	类型	描述
x	`<number>`	矩形路径左上角的 x 坐标
y	`<number>`	矩形路径左上角的 y 坐标
width	`<number>`	矩形路径的宽度
height	`<number>`	矩形路径的高度

绘制路径

fill()

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

语法

ctx.fill();

stroke()

画出当前路径的边框

语法

ctx.stroke();

clip()

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

语法

 ctx.clip();

变换

rotate()

顺时针旋转当前坐标轴

语法

ctx.rotate(angle);

参数

参数	类型	描述
rotate	`<number>`	顺时针旋转的弧度。如果你想通过角度值计算，可以使用公式： degree * Math.PI / 180 。旋转中心点一直是 canvas 的起始点。如果想改变中心点，可以通过 translate() 方法移动 canvas.

scale()

据 x 水平方向和 y 垂直方向，为 canvas 单位添加缩放变换。

语法

ctx.scale(x, y);

参数

参数	类型	描述
x	`<number>`	水平方向的缩放因子
y	`<number>`	垂直方向的缩放因子

setTransform()

使用矩阵重新设置（覆盖）当前变换的方法

语法

ctx.setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY);

参数

参数	类型	描述
scaleX	`<number>`	水平缩放
skewX	`<number>`	水平倾斜
skewY	`<number>`	垂直倾斜
scaleY	`<number>`	垂直缩放
translateX	`<number>`	水平移动
translateY	`<number>`	垂直移动

transform()

使用矩阵多次叠加当前变换

语法

ctx.transform(scaleX, skewX, skewY, scaleY, translateX, translateY);

参数

参数	类型	描述
scaleX	`<number>`	水平缩放
skewX	`<number>`	水平倾斜
skewY	`<number>`	垂直倾斜
scaleY	`<number>`	垂直缩放
translateX	`<number>`	水平移动
translateY	`<number>`	垂直移动

translate()

对当前坐标系的原点(0, 0)进行变换

语法

ctx.translate(x, y);

参数

参数	类型	描述
x	`<number>`	水平坐标平移量
y	`<number>`	竖直坐标平移量

合成

globalAlpha

设置全局画笔透明度

语法

ctx.globalAlpha = value;

参数

参数	类型	描述
value	`<number>`	数字在 0.0 （完全透明）和 1.0 （完全不透明）之间。默认值是 1.0

Canvas 状态

restore()

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

语法

ctx.restore();

save()

保存当前的绘图上下文

语法

ctx.save();

setLineDash()

设置虚线样式的方法

语法

ctx.setLineDash(segments);

参数

参数	类型	描述
segments	`<Array>`	描述交替绘制线段和间距长度的数字

lineDashOffset

设置虚线偏移量的属性

语法

ctx.lineDashOffset(value);

参数

参数	类型	描述
value	`<number>`	偏移量是 float 精度的数字。初始值为 0.0

globalCompositeOperation

设置要在绘制新形状时应用的合成操作的类型。

语法

ctx.globalCompositeOperation(type);

参数

参数	类型	描述
type	`<string>`	标识要使用的合成或混合模式操作的字符串

属性值

值	描述
source-over	默认。在目标图像上显示源图像。
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out	在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over	在源图像上方显示目标图像。
destination-atop	在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in	在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out	在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter	显示源图像 + 目标图像。
copy	显示源图像。忽略目标图像。
xor	使用异或操作对源图像与目标图像进行组合。

shadowBlur()

阴影的模糊级别，数值越大越模糊，默认值为 0

语法

ctx.shadowBlur(blur);

参数

参数	类型	描述
blur	`<number>`	描述模糊效果程度的，float 类型的值。默认值是 0。

shadowColor

可以转换成 CSS值的 DOMString 字符串。默认值是 fully-transparent black.

语法

ctx.shadowColor(color);
ctx.shadowColor('#000000')
ctx.shadowColor('rgb(188,219,236)')

参数

参数	类型	描述
color	`<string>`	CSS color，模糊的颜色

shadowOffsetX

阴影水平偏移距离的 float 类型的值。默认值是 0。

语法

ctx.shadowOffsetX(offsetX);

参数

参数	类型	描述
offsetX	`<number>`	阴影在水平方向的偏移

shadowOffsetY

阴影垂直偏移距离的 float 类型的值。默认值是 0。

语法

ctx.shadowOffsetY(offsetY);

参数

参数	类型	描述
offsetY	`<number>`	阴影在竖直方向的偏移

CanvasGradient

概述

渐变对象，通过 new CanvasGradient() 创建

语法

const gradient = new CanvasGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"white");

方法

CanvasGradient.addColorStop()

该方法在 CanvasGradient 对象上添加一个由偏移值和颜色值指定的断点

语法

gradient.addColorStop(offset, color);

参数

参数	类型	描述
offset	`<number>`	`0`到`1`之间的值, 表示渐变点在起点和终点中的位置
color	`<string>`	CSS Color

ESCanvasComponent ​

绘图API参考 ​

方法和属性 ​

绘制矩形 ​

clearRect() ​

语法 ​

参数 ​

fillRect() ​

语法 ​

参数 ​

strokeRect() ​

语法 ​

参数 ​

绘制文本 ​

fillText() ​

语法 ​

参数 ​

strokeText() ​

语法 ​

参数 ​

线型 ​

lineWidth ​

语法 ​

参数 ​

lineCap ​

语法 ​

参数 ​

lineJoin ​

语法 ​

参数 ​

文本样式 ​

font ​

语法 ​

参数 ​

textAlign ​

语法 ​

参数 ​

textBaseline ​

语法 ​

参数 ​

填充和描边样式 ​

fillStyle ​

语法 ​

参数 ​

strokeStyle ​

语法 ​

参数 ​

渐变和图案 ​

CanvasGradient ​

语法 ​

参数 ​

路径 ​

beginPath() ​

语法 ​

closePath() ​

语法 ​

moveTo() ​

语法 ​

参数 ​

lineTo() ​

语法 ​

参数 ​

bezierCurveTo() ​

语法 ​

参数 ​

quadraticCurveTo() ​

语法 ​

参数 ​

arc() ​

语法 ​

参数 ​

arcTo() ​

语法 ​

参数 ​

rect() ​

语法 ​

参数 ​

绘制路径 ​

fill() ​

语法 ​

ESCanvasComponent

绘图API参考

方法和属性

绘制矩形

clearRect()

语法

参数

fillRect()

语法

参数

strokeRect()

语法

参数

绘制文本

fillText()

语法

参数

strokeText()

语法

参数

线型

lineWidth

语法

参数

lineCap

语法

参数

lineJoin

语法

参数

文本样式

font

语法

参数

textAlign

语法

参数

textBaseline

语法

参数

填充和描边样式

fillStyle

语法

参数

strokeStyle

语法

参数

渐变和图案

CanvasGradient

语法

参数

路径

beginPath()

语法

closePath()

语法

moveTo()

语法

参数

lineTo()

语法

参数

bezierCurveTo()

语法

参数

quadraticCurveTo()

语法

参数

arc()

语法

参数

arcTo()

语法

参数

rect()

语法

参数

绘制路径

fill()

语法