小程序API能力集成指南——画布API汇总（四）

CanvasContext

canvas 组件的绘图上下文。

方法如下（3）：

scale

CanvasContext.scale

CanvasContext.scale(number scaleWidth, number scaleHeight)

功能描述

在调用后，之后创建的路径其横纵坐标会被缩放。多次调用倍数会相乘。

参数

number scaleWidth

横坐标缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)

number scaleHeight

纵坐标轴缩放的倍数 (1 = 100%，0.5 = 50%，2 = 200%)

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.strokeRect(10, 10, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(10, 10, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(10, 10, 25, 15);
 
ctx.draw();

rotate

CanvasContext.rotate

CanvasContext.rotate(number rotate)

功能描述

以原点为中心顺时针旋转当前坐标轴。多次调用旋转的角度会叠加。原点可以用 translate 方法修改。

参数

number rotate

旋转角度，以弧度计 degrees * Math.PI/180；degrees 范围为 0-360

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.strokeRect(100, 10, 150, 100);
ctx.rotate((20 * Math.PI) / 180);
ctx.strokeRect(100, 10, 150, 100);
ctx.rotate((20 * Math.PI) / 180);
ctx.strokeRect(100, 10, 150, 100);
 
ctx.draw();

👉 立即开发。

translate

CanvasContext.translate

CanvasContext.translate(number x, number y)

功能描述

对当前坐标系的原点 (0, 0) 进行变换。默认的坐标系原点为页面左上角。

参数

number x

水平坐标平移量

number y

竖直坐标平移量

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.strokeRect(10, 10, 150, 100);
ctx.translate(20, 20);
ctx.strokeRect(10, 10, 150, 100);
ctx.translate(20, 20);
ctx.strokeRect(10, 10, 150, 100);
 
ctx.draw();

strokeText

CanvasContext.strokeText

CanvasContext.strokeText(string text, number x, number y, number maxWidth)

功能描述

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

参数

string text

要绘制的文本

number x

文本起始点的 x 轴坐标

number y

文本起始点的 y 轴坐标

number maxWidth

需要绘制的最大宽度，可选

transform

CanvasContext.transform

CanvasContext.transform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)

功能描述

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

参数

number scaleX

水平缩放

number skewX

水平倾斜

number skewY

垂直倾斜

number scaleY

垂直缩放

number translateX

水平移动

number translateY

垂直移动

setTransform

CanvasContext.setTransform

CanvasContext.setTransform(number scaleX, number skewX, number skewY, number scaleY, number translateX, number translateY)

功能描述

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

参数

number scaleX

水平缩放

number skewX

水平倾斜

number skewY

垂直倾斜

number scaleY

垂直缩放

number translateX

水平移动

number translateY

垂直移动

setFillStyle

CanvasContext.setFillStyle

CanvasContext.setFillStyle(string|CanvasGradient color)

功能描述

设置填充色。

参数

string|CanvasGradient color

填充的颜色，默认颜色为 black。

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.setFillStyle('red');
ctx.fillRect(10, 10, 150, 75);
ctx.draw();

👉 立即开发。

setStrokeStyle

CanvasContext.setStrokeStyle

CanvasContext.setStrokeStyle(string | CanvasGradient.addColorStop() color)

功能描述

设置描边颜色。

参数

string | CanvasGradient.addColorStop() color

描边的颜色，默认颜色为 black。

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.setStrokeStyle('red');
ctx.strokeRect(10, 10, 150, 75);
ctx.draw();

setShadow

CanvasContext.setShadow

CanvasContext.setShadow(number offsetX, number offsetY, number blur, string color)

功能描述

设定阴影样式。

参数

number offsetX

阴影相对于形状在水平方向的偏移，默认值为 0。

number offsetY

阴影相对于形状在竖直方向的偏移，默认值为 0。

number blur

阴影的模糊级别，数值越大越模糊。范围 0- 100。，默认值为 0。

string color

阴影的颜色。默认值为 black。

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.setFillStyle('red');
ctx.setShadow(10, 50, 50, 'blue');
ctx.fillRect(10, 10, 150, 75);
ctx.draw();

setGlobalAlpha

CanvasContext.setGlobalAlpha

CanvasContext.setGlobalAlpha(number alpha)

功能描述

设置全局画笔透明度。

参数

number alpha

透明度。范围 0-1，0 表示完全透明，1 表示完全不透明。

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.setFillStyle('red');
ctx.fillRect(10, 10, 150, 100);
ctx.setGlobalAlpha(0.2);
ctx.setFillStyle('blue');
ctx.fillRect(50, 50, 150, 100);
ctx.setFillStyle('yellow');
ctx.fillRect(100, 100, 150, 100);
 
ctx.draw();

👉 立即开发。