createCanvasContext
ty.createCanvasContext(string canvasId)
创建 canvas 的绘图上下文 CanvasContext 对象
参数
string canvasId
要获取上下文的 canvas 组件 canvas-id 属性
返回值
CanvasContext
canvas 组件的绘图上下文。
方法如下(1):
draw
CanvasContext.draw
CanvasContext.draw()
功能描述
将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。
示例代码
const ctx = ty.createCanvasContext('myCanvas');
ctx.setFillStyle('red');
ctx.fillRect(10, 10, 150, 100);
ctx.draw();
ctx.fillRect(50, 50, 150, 100);
ctx.draw();
createLinearGradient
CanvasGradient CanvasContext.createLinearGradient
CanvasContext.createLinearGradient(number x0, number y0, number x1, number y1)
功能描述
创建一个线性的渐变颜色。返回的 CanvasGradient
对象需要使用 CanvasGradient.addColorStop() 来指定渐变点,至少要两个。
参数
number x0
起点的 x 坐标
number y0
起点的 y 坐标
number x1
终点的 x 坐标
number y1
终点的 y 坐标
返回值
示例代码
const ctx = ty.createCanvasContext('myCanvas');
// Create linear gradient
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'white');
// Fill with gradient
ctx.setFillStyle(grd);
ctx.fillRect(10, 10, 150, 80);
ctx.draw();
createCircularGradient
CanvasGradient CanvasContext.createCircularGradient
CanvasContext.createCircularGradient(number x, number y, number r)
功能描述
创建一个圆形的渐变颜色。起点在圆心,终点在圆环。返回的 CanvasGradient
对象需要使用 CanvasGradient.addColorStop() 来指定渐变点,至少要两个。
参数
number x
圆心的 x 坐标
number y
圆心的 y 坐标
number r
圆的半径
返回值
示例代码
const ctx = ty.createCanvasContext('myCanvas');
// Create circular gradient
const grd = ctx.createCircularGradient(75, 50, 50);
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'white');
// Fill with gradient
ctx.setFillStyle(grd);
ctx.fillRect(10, 10, 150, 80);
ctx.draw();
👉 立即开发。
save
CanvasContext.save
CanvasContext.save()
功能描述
保存绘图上下文。
参数
number rotate
旋转角度,以弧度计 degrees * Math.PI/180;degrees 范围为 0-360
示例代码
const ctx = ty.createCanvasContext('myCanvas');
// save the default fill style
ctx.save();
ctx.setFillStyle('red');
ctx.fillRect(10, 10, 150, 100);
// restore to the previous saved state
ctx.restore();
ctx.fillRect(50, 50, 150, 100);
ctx.draw();
restore
CanvasContext.restore
CanvasContext.restore()
功能描述
恢复之前保存的绘图上下文。
示例代码
const ctx = ty.createCanvasContext('myCanvas');
// save the default fill style
ctx.save();
ctx.setFillStyle('red');
ctx.fillRect(10, 10, 150, 100);
// restore to the previous saved state
ctx.restore();
ctx.fillRect(50, 50, 150, 100);
ctx.draw();
beginPath
CanvasContext.beginPath
CanvasContext.beginPath()
功能描述
开始创建一个路径。需要调用 fill
或者 stroke
才会使用路径进行填充或描边
- 在最开始的时候相当于调用了一次
beginPath
。 - 同一个路径内的多次
setFillStyle
、setStrokeStyle
、setLineWidth
等设置,以最后一次设置为准。
示例代码
const ctx = ty.createCanvasContext('myCanvas');
// begin path
ctx.rect(10, 10, 100, 30);
ctx.setFillStyle('yellow');
ctx.fill();
// begin another path
ctx.beginPath();
ctx.rect(10, 40, 100, 30);
// only fill this rect, not in current path
ctx.setFillStyle('blue');
ctx.fillRect(10, 70, 100, 30);
ctx.rect(10, 100, 100, 30);
// it will fill current path
ctx.setFillStyle('red');
ctx.fill();
ctx.draw();
moveTo
CanvasContext.moveTo
CanvasContext.moveTo(number x, number y)
功能描述
把路径移动到画布中的指定点,不创建线条。用 stroke 方法来画线条
参数
number x
目标位置的 x 坐标
number y
目标位置的 y 坐标
示例代码
const ctx = ty.createCanvasContext('myCanvas');
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.moveTo(10, 50);
ctx.lineTo(100, 50);
ctx.stroke();
ctx.draw();
👉 立即开发。
lineTo
CanvasContext.lineTo
CanvasContext.lineTo(number x, number y)
功能描述
增加一个新点,然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条
参数
number x
目标位置的 x 坐标
number y
目标位置的 y 坐标
示例代码
const ctx = ty.createCanvasContext('myCanvas');
ctx.setFillStyle('red');
ctx.fillRect(10, 10, 150, 75);
ctx.draw();
quadraticCurveTo
CanvasContext.quadraticCurveTo
CanvasContext.quadraticCurveTo(number cpx, number cpy, number x, number y)
功能描述
创建二次贝塞尔曲线路径。曲线的起始点为路径中前一个点。
参数
number cpx
贝塞尔控制点的 x 坐标
number cpy
贝塞尔控制点的 y 坐标
number x
结束点的 x 坐标
number y
结束点的 y 坐标
示例代码
const ctx = ty.createCanvasContext('myCanvas');
// Draw points
ctx.beginPath();
ctx.arc(20, 20, 2, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.fill();
ctx.beginPath();
ctx.arc(200, 20, 2, 0, 2 * Math.PI);
ctx.setFillStyle('lightgreen');
ctx.fill();
ctx.beginPath();
ctx.arc(20, 100, 2, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();
ctx.setFillStyle('black');
ctx.setFontSize(12);
// Draw guides
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(200, 20);
ctx.setStrokeStyle('#AAAAAA');
ctx.stroke();
// Draw quadratic curve
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.setStrokeStyle('black');
ctx.stroke();
ctx.draw();
针对 moveTo(20, 20) quadraticCurveTo(20, 100, 200, 20) 的三个关键坐标如下:
- 红色:起始点(20, 20)
- 蓝色:控制点(20, 100)
- 绿色:终止点(200, 20)
bezierCurveTo
CanvasContext.bezierCurveTo
CanvasContext.bezierCurveTo(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
功能描述
创建三次方贝塞尔曲线路径。曲线的起始点为路径中前一个点。
参数
number cp1x
第一个贝塞尔控制点的 x 坐标
number cp1y
第一个贝塞尔控制点的 y 坐标
number cp2x
第二个贝塞尔控制点的 x 坐标
number cp2y
第二个贝塞尔控制点的 y 坐标
number x
结束点的 x 坐标
number y
结束点的 y 坐标
示例代码
const ctx = ty.createCanvasContext('myCanvas');
// Draw points
ctx.beginPath();
ctx.arc(20, 20, 2, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.fill();
ctx.beginPath();
ctx.arc(200, 20, 2, 0, 2 * Math.PI);
ctx.setFillStyle('lightgreen');
ctx.fill();
ctx.beginPath();
ctx.arc(20, 100, 2, 0, 2 * Math.PI);
ctx.arc(200, 100, 2, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();
ctx.setFillStyle('black');
ctx.setFontSize(12);
// Draw guides
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(150, 75);
ctx.moveTo(200, 20);
ctx.lineTo(200, 100);
ctx.lineTo(70, 75);
ctx.setStrokeStyle('#AAAAAA');
ctx.stroke();
// Draw quadratic curve
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.setStrokeStyle('black');
ctx.stroke();
ctx.draw();
针对 moveTo(20, 20) bezierCurveTo(20, 100, 200, 100, 200, 20) 的三个关键坐标如下:
- 红色:起始点(20, 20)
- 蓝色:两个控制点(20, 100) (200, 100)
- 绿色:终止点(200, 20)
👉 立即开发。