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

最新推荐文章于 2024-08-08 17:05:15 发布

IoT砖家涂拉拉

最新推荐文章于 2024-08-08 17:05:15 发布

阅读量2.1k

点赞数 58

文章标签：小程序 apache iot API 前端数据库 linux

本文链接：https://blog.csdn.net/Ms_Smart/article/details/136395075

版权

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

返回值

CanvasGradient

示例代码

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

圆的半径

返回值

CanvasGradient

示例代码

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();