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

时间：2024-03-12 21:48:50

CanvasContext

canvas 组件的绘图上下文。

方法如下（2）：

arc

CanvasContext.arc

CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)

功能描述

创建一条弧线。

  • 创建一个圆可以指定起始弧度为 0，终止弧度为 2 * Math.PI。
  • 用 stroke 或者 fill 方法来在 canvas 中画弧线。

参数

number x

圆心的 x 坐标

number y

圆心的 y 坐标

number r

圆的半径

number sAngle

起始弧度，单位弧度（在 3 点钟方向）

number eAngle

终止弧度

boolean counterclockwise

弧度的方向是否是逆时针

示例代码

 <canvas canvas-id="myCanvas" style="border: 1px solid;"/>
const ctx = ty.createCanvasContext('myCanvas');
 
// Draw coordinates
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.setFillStyle('#EEEEEE');
ctx.fill();
 
ctx.beginPath();
ctx.moveTo(40, 75);
ctx.lineTo(160, 75);
ctx.moveTo(100, 15);
ctx.lineTo(100, 135);
ctx.setStrokeStyle('#AAAAAA');
ctx.stroke();
 
ctx.setFontSize(12);
ctx.setFillStyle('black');
ctx.fillText('0', 165, 78);
ctx.fillText('0.5*PI', 83, 145);
ctx.fillText('1*PI', 15, 78);
ctx.fillText('1.5*PI', 83, 10);
 
// Draw points
ctx.beginPath();
ctx.arc(100, 75, 2, 0, 2 * Math.PI);
ctx.setFillStyle('lightgreen');
ctx.fill();
 
ctx.beginPath();
ctx.arc(100, 25, 2, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();
 
ctx.beginPath();
ctx.arc(150, 75, 2, 0, 2 * Math.PI);
ctx.setFillStyle('red');
ctx.fill();
 
// Draw arc
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 1.5 * Math.PI);
ctx.setStrokeStyle('#333333');
ctx.stroke();
 
ctx.draw();

针对 arc(100, 75, 50, 0, 1.5 * Math.PI)的三个关键坐标如下：

  • 绿色: 圆心 (100, 75)
  • 红色: 起始弧度 (0)
  • 蓝色: 终止弧度 (1.5 * Math.PI)

???? 立即开发。

rect

CanvasContext.rect

CanvasContext.rect(number x, number y, number width, number height)

功能描述

创建一个矩形路径。需要用 fill 或者 stroke 方法将矩形真正的画到 canvas 中

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

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

arcTo

CanvasContext.arcTo

CanvasContext.arcTo(number x1, number y1, number x2, number y2, number radius)

功能描述

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

参数

number x1

第一个控制点的 x 轴坐标

number y1

第一个控制点的 y 轴坐标

number x2

第二个控制点的 x 轴坐标

number y2

第二个控制点的 y 轴坐标

number radius

圆弧的半径

fillRect

CanvasContext.fillRect

CanvasContext.fillRect(number x, number y, number width, number height)

功能描述

填充一个矩形。用 setFillStyle 设置矩形的填充色，如果没设置默认是黑色。

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

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

strokeRect

CanvasContext.strokeRect

CanvasContext.strokeRect(number x, number y, number width, number height)

功能描述

画一个矩形(非填充)。 用 setStrokeStyle 设置矩形线条的颜色，如果没设置默认是黑色。

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

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

???? 立即开发。

clearRect

CanvasContext.clearRect

CanvasContext.clearRect(number x, number y, number width, number height)

功能描述

清除画布上在该矩形区域内的内容

参数

number x

矩形路径左上角的横坐标

number y

矩形路径左上角的纵坐标

number width

矩形路径的宽度

number height

矩形路径的高度

示例代码

clearRect 并非画一个白色的矩形在地址区域，而是清空，为了有直观感受，对 canvas 加了一层背景色。

<canvas canvas-id="myCanvas" style="border: 1px solid; background: #123456;"/>
const ctx = ty.createCanvasContext('myCanvas');
ctx.setFillStyle('red');
ctx.fillRect(0, 0, 150, 200);
ctx.setFillStyle('blue');
ctx.fillRect(150, 0, 150, 200);
ctx.clearRect(10, 10, 150, 75);
ctx.draw();

fill

CanvasContext.fill

CanvasContext.fill()

功能描述

对当前路径中的内容进行填充。默认的填充色为黑色。

示例代码

如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充。

const ctx = ty.createCanvasContext('myCanvas');
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.fill();
ctx.draw();

fill() 填充的的路径是从 beginPath() 开始计算，但是不会将 fillRect() 包含进去。

stroke

CanvasContext.stroke

CanvasContext.stroke()

功能描述

画出当前路径的边框。默认颜色色为黑色。

示例代码

const ctx = ty.createCanvasContext('myCanvas');
 
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.stroke();
ctx.draw();

stroke() 描绘的的路径是从 beginPath() 开始计算，但是不会将 strokeRect() 包含进去。

const ctx = ty.createCanvasContext('myCanvas');
// begin path
ctx.rect(10, 10, 100, 30);
ctx.setStrokeStyle('yellow');
ctx.stroke();
 
// begin another path
ctx.beginPath();
ctx.rect(10, 40, 100, 30);
 
// only stoke this rect, not in current path
ctx.setStrokeStyle('blue');
ctx.strokeRect(10, 70, 100, 30);
 
ctx.rect(10, 100, 100, 30);
 
// it will stroke current path
ctx.setStrokeStyle('red');
ctx.stroke();
ctx.draw();

closePath

CanvasContext.closePath

CanvasContext.closePath()

功能描述

关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染。

示例代码

const ctx = ty.createCanvasContext('myCanvas');
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();
ctx.draw();

???? 立即开发。

相关文章