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();
👉 立即开发。
