canvas

画布组件，通过使用 JavaScript 中的脚本，可以在 canvas 上绘制图形，制作照片，创建动画等。

子组件

不支持

属性

支持通用属性

样式

支持通用样式

方法

canvas.getContext()

创建 canvas 绘图上下文

参数

参数	类型	描述
contextType	<string>	目前支持传入'2d'

返回值

参数	类型	描述
'2d'	CanvasRenderingContext2D	返回一个 CanvasRenderingContext2D 对象，用于 2D 绘制，请参考 CanvasRenderingContext2D对象

示例

var canvas = this.$element('canvasid');
var ctx = canvas.getContext('2d');

---

CanvasRenderingContext2D

通过 CanvasRenderingContext2D 可以在 canvas 上绘制矩形、文本、图片和其他对象。可以在 canvas 上调用 getContext('2d') 来获取 CanvasRenderingContext2D 的对象。

方法和属性

填充和描边样式

CanvasRenderingContext2D.fillStyle

设置填充色

语法

ctx.fillStyle = color;

参数

参数	类型	描述
color	<string>	CSS color

CanvasRenderingContext2D.strokeStyle

设置边框颜色

语法

ctx.strokeStyle = color;

参数

参数	类型	描述
color	<string>	CSS color

路径

CanvasRenderingContext2D.beginPath()

开始创建一个新路径

语法

ctx.beginPath();

CanvasRenderingContext2D.closePath()

封闭一个路径

语法

ctx.closePath();

CanvasRenderingContext2D.moveTo()

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

语法

ctx.moveTo(x, y);

参数

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

CanvasRenderingContext2D.lineTo()

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

语法

ctx.lineTo(x, y);

参数

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

CanvasRenderingContext2D.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，逆时针绘制圆，反之，顺时针绘制

CanvasRenderingContext2D.arcTo()

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

语法

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

参数

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

CanvasRenderingContext2D.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 坐标

CanvasRenderingContext2D.quadraticCurveTo()

创建二次贝塞尔曲线路径

语法

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

参数

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

CanvasRenderingContext2D.rect()

创建一个矩形

语法

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

参数

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

线型

CanvasRenderingContext2D.lineWidth

设置线条的宽度

语法

ctx.lineWidth = lineWidth;

参数

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

CanvasRenderingContext2D.lineCap

设置线条的端点样式

语法

ctx.lineCap = lineCap;

参数

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

绘制路径

CanvasRenderingContext2D.fill()

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

语法

ctx.fill();

CanvasRenderingContext2D.stroke()

画出当前路径的边框

语法

ctx.stroke();

绘制矩形

CanvasRenderingContext2D.fillRect()

填充一个矩形

语法

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

参数

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

CanvasRenderingContext2D.strokeRect()

画一个非填充矩形

语法

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

参数

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

文本样式

CanvasRenderingContext2D.font

设置当前字体样式的属性

语法

ctx.font = value;

参数

参数	类型	描述
value	<string>	仅支持字体大小。默认值为 30px

CanvasRenderingContext2D.textAlign

设置文字的对齐方式

语法

ctx.textAlign = align;

参数

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

CanvasRenderingContext2D.textBaseline

设置文字的水平对齐

语法

ctx.textBaseline = textBaseline;

参数

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

绘制文本

CanvasRenderingContext2D.fillText()

填充文本

语法

ctx.fillText(text, x, y)

参数

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

CanvasRenderingContext2D.fillArcText()

填充弧形文本

语法

ctx.fillArcText(text, x, y, radius, startAngle);

参数

参数	类型	描述
text	<string>	要绘制的文本
x	<number>	文本起始点的 x 轴坐标
y	<number>	文本起始点的 y 轴坐标
radius	<number>	圆的半径
startAngle	<number>	起始弧度， y 轴方向开始计算，单位以弧度表示。

变换

CanvasRenderingContext2D.rotate()

顺时针旋转当前坐标轴

语法

ctx.rotate(angle);

参数

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

CanvasRenderingContext2D.scale()

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

语法

ctx.scale(x, y);

参数

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

CanvasRenderingContext2D.translate()

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

语法

ctx.translate(x, y);

参数

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

CanvasRenderingContext2D.shear()

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

语法

ctx.shear(x, y);

参数

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