百度智能小程序API 绘图

由 Carrie 创建, 最后一次修改 2018-07-09

简介


解释:canvas 画布,可使用 JS 操作 canvas 上下文,发出指令,进行绘制。

SWAN模板写法示例:

<canvas canvas-id="myCanvas" />
JS写法示例:
Page({
    onReady: function () {
        const ctx = this.createCanvasContext('myCanvas');
        ctx.setFillStyle('#ff0000');
        ctx.arc(100, 100, 50, 0, 2 * Math.PI);
        ctx.fill();
        ctx.draw();
    }
});
我们来回顾一下,刚刚都执行了哪些指令:

1、创建绘图上下文

推荐使用 Page 对象上挂载的createCanvasContext方法,进行绘制上下文的创建:

Page({
    onReady: function () {
        const ctx = this.createCanvasContext('myCanvas');
	}
});

当然,也可以使用 SWAN 上挂载的createCanvasContext方法。如下,我们调用 SWAN 的接口createCanvasContext创建了一个绘制上下文(但请注意,使用 SWAN 上挂载的createCanvasContext,会在当前用户可见的 Page 中寻找canvas)。

const ctx = swan.createCanvasContext('myCanvas');
2、发送绘制指令

设置颜色,并画一个圆,填充。

ctx.setFillStyle('#ff0000');
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

3、绘制执行上面已经发出的指令,进行 canvas 绘制。

ctx.draw();

坐标系


canvas 坐标系,以左上角为(0, 0),横轴为 x,纵轴为 y。如:ctx.arc(100, 200, 50, 0, 2 * Math.PI);命令,就是在x: 100, y: 200为圆心处,开始画圆。

createCanvasContext


解释:在 Page 中,推荐使用this.createCanvasContext(canvasId),进行绘图上下文的创建。

Tips:

也可使用swan.createCanvasContext(canvasId),但使用swan.createCanvasContext(canvasId)进行创建时,并非在执行所在的 Page 对象中使用 canvasId 进行查找,而是在用户当前可视的 Page 中使用 canvasId 进行查找。

canvasContext.setFillStyle


解释:设置填充色。

参数:

参数名 类型 必填 说明
color Color 设置的填充颜色

示例:

const ctx = this.createCanvasContext('myCanvas');
ctx.setFillStyle('blue');
ctx.fillRect(30, 30, 150, 75);
ctx.draw();
201807091743061893

canvasContext.setStrokeStyle


解释:设置边框颜色。

参数:

参数名 类型 必填 说明
color Color 设置的边框颜色

示例:

const ctx = this.createCanvasContext('myCanvas');
ctx.setStrokeStyle('blue');
ctx.strokeRect(30, 30, 150, 75);
ctx.draw();
201807091743066362

canvasContext.setShadow


解释:设置阴影样式。

参数:

参数名 类型 范围 说明
offsetX Number 阴影相对于形状在水平方向的偏移
offsetY Number 阴影相对于形状在竖直方向的偏移
blur Number 1 ~ 100 阴影的模糊级别,数值越大越模糊
color Color 阴影的颜色

示例:

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

canvasContext.createLinearGradient


解释:创建一个线性的渐变颜色。

参数:

参数名 类型 说明
x0 Number 起点的 x 坐标
y0 Number 起点的 y 坐标
x1 Number 阴影的模糊级别,数值越大越模糊
y1 Number 阴影的颜色

示例:

const ctx = this.createCanvasContext('myCanvas');

// Create linear gradient
const grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, 'blue');
grd.addColorStop(1, 'red');

// Fill with gradient
ctx.setFillStyle(grd);
ctx.fillRect(30, 30, 150, 80);
ctx.draw();
201807091743072594

canvasContext.createCircularGradient


解释:创建一个圆形的渐变颜色。

参数:

参数名 类型 说明
x Number 圆心的 x 坐标
y Number 圆心的 y 坐标
r Number 圆的半径

示例:

const ctx = swan.createCanvasContext('myCanvas');

// Create circular gradient
const grd = ctx.createCircularGradient(75, 50, 50);
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'blue');

// Fill with gradient
ctx.setFillStyle(grd);
ctx.fillRect(30, 30, 150, 80);
ctx.draw();
201807091743073315

canvasContext.addColorStop


解释:创建一个颜色的渐变点。

参数:

参数名 类型 说明
stop Number(0-1) 表示渐变点在起点和终点中的位置
color Color 渐变点的颜色

示例:

const ctx = swan.createCanvasContext('myCanvas');

// Create circular gradient
const grd = ctx.createLinearGradient(30, 10, 120, 10);
grd.addColorStop(0, 'red');
grd.addColorStop(0.16, 'orange');
grd.addColorStop(0.33, 'yellow');
grd.addColorStop(0.5, 'green');
grd.addColorStop(0.66, 'cyan');
grd.addColorStop(0.83, 'blue');
grd.addColorStop(1, 'purple');

// Fill with gradient
ctx.setFillStyle(grd);
ctx.fillRect(30, 30, 150, 80);
ctx.draw();
201807091743076946

Bug & Tip:1、addColorStop 目前在 Android 有bug。

canvasContext.setLineWidth


解释:设置线条的宽度。

参数:

参数名 类型 说明
lineWidth Number 线条的宽度(单位是 px)

示例:

const ctx = swan.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(30, 10);
ctx.lineTo(200, 10);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(5);
ctx.moveTo(50, 30);
ctx.lineTo(200, 30);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(10);
ctx.moveTo(70, 50);
ctx.lineTo(200, 50);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(15);
ctx.moveTo(90, 70);
ctx.lineTo(200, 70);
ctx.stroke();

ctx.draw();
201807091743073471

canvasContext.setLineCap


解释:设置线条的端点样式。

参数:

参数名 类型 范围 说明
lineCap String ‘butt’、’round’、’square’ 线条的结束端点样式

示例:

const ctx = swan.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(30, 10);
ctx.lineTo(200, 10);
ctx.stroke();

ctx.beginPath();
ctx.setLineCap('butt');
ctx.setLineWidth(10);
ctx.moveTo(50, 30);
ctx.lineTo(200, 30);
ctx.stroke();

ctx.beginPath();
ctx.setLineCap('round');
ctx.setLineWidth(10);
ctx.moveTo(70, 50);
ctx.lineTo(200, 50);
ctx.stroke();

ctx.beginPath();
ctx.setLineCap('square');
ctx.setLineWidth(10);
ctx.moveTo(90, 70);
ctx.lineTo(200, 70);
ctx.stroke();

ctx.draw();
201807091743078084

canvasContext.setLineJoin


解释:设置线条的交点样式。

参数:

参数名 类型 范围 说明
lineJoin String ‘bevel’、’round’、’miter’ 线条的结束交点样式

示例:

const ctx = swan.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 50);
ctx.lineTo(10, 90);
ctx.stroke();

ctx.beginPath();
ctx.setLineJoin('bevel');
ctx.setLineWidth(10);
ctx.moveTo(50, 10);
ctx.lineTo(140, 50);
ctx.lineTo(50, 90);
ctx.stroke();

ctx.beginPath();
ctx.setLineJoin('round');
ctx.setLineWidth(10);
ctx.moveTo(90, 10);
ctx.lineTo(180, 50);
ctx.lineTo(90, 90);
ctx.stroke();

ctx.beginPath();
ctx.setLineJoin('miter');
ctx.setLineWidth(10);
ctx.moveTo(130, 10);
ctx.lineTo(220, 50);
ctx.lineTo(130, 90);
ctx.stroke();

ctx.draw();
201807091743076892

canvasContext.setLineDash


解释:设置线条的宽度。

参数:

参数名 类型 说明
pattern Array 一组描述交替绘制线段和间距(坐标空间单位)长度的数字
offset Number 虚线偏移量

示例:

const ctx = swan.createCanvasContext('myCanvas');
ctx.setLineDash([10, 20], 5);
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();
ctx.draw();
201807091743073391

canvasContext.setMiterLimit


解释:设置最大斜接长度,斜接长度指的是在两条线交汇处内角和外角之间的距离,当 setLineJoin() 为 miter 时才有效,超过最大倾斜长度的,连接处将以 lineJoin 为 bevel 来显示。

参数:

参数名 类型 说明
miterLimit Number 最大斜接长度

示例:

const ctx = swan.createCanvasContext('myCanvas');
ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(1);
ctx.moveTo(10, 10);
ctx.lineTo(100, 50);
ctx.lineTo(10, 90);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(2);
ctx.moveTo(50, 10);
ctx.lineTo(140, 50);
ctx.lineTo(50, 90);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(3);
ctx.moveTo(90, 10);
ctx.lineTo(180, 50);
ctx.lineTo(90, 90);
ctx.stroke();

ctx.beginPath();
ctx.setLineWidth(10);
ctx.setLineJoin('miter');
ctx.setMiterLimit(4);
ctx.moveTo(130, 10);
ctx.lineTo(220, 50);
ctx.lineTo(130, 90);
ctx.stroke();

ctx.draw();
201807091743075052

canvasContext.rect


解释:创建一个矩形。

参数:

参数名 类型 说明
x Number 矩形路径左上角的 x 坐标
y Number 矩形路径左上角的 y 坐标
width Number 矩形路径的宽度
height Number 矩形路径的高度

示例:

const ctx = swan.createCanvasContext('myCanvas');
ctx.rect(30, 30, 150, 75);
ctx.setFillStyle('blue');
ctx.fill();
ctx.draw();

201807091743083148

canvasContext.fillRect


解释:填充一个矩形。

参数:

参数名 类型 说明
x Number 矩形路径左上角的 x 坐标
y Number 矩形路径左上角的 y 坐标
width Number 矩形路径的宽度
height Number 矩形路径的高度

示例:

const ctx = swan.createCanvasContext('myCanvas');
ctx.setFillStyle('blue');
ctx.fillRect(30, 30, 150, 75);
ctx.draw();

201807091743085487

canvasContext.strokeRect


解释:画一个矩形(非填充)。

参数:

参数名 类型 说明
x Number 矩形路径左上角的 x 坐标
y Number 矩形路径左上角的 y 坐标
width Number 矩形路径的宽度
height Number 矩形路径的高度

示例:

const ctx = swan.createCanvasContext('myCanvas');
ctx.setStrokeStyle('blue');
ctx.strokeRect(30, 30, 150, 75);
ctx.draw();

201807091743086026

canvasContext.clearRect


解释:清除画布上在该矩形区域内的内容。

参数:

参数名 类型 说明
x Number 矩形路径左上角的 x 坐标
y Number 矩形路径左上角的 y 坐标
width Number 矩形路径的宽度
height Number 矩形路径的高度

示例:

const ctx = swan.createCanvasContext('myCanvas');
ctx.setFillStyle('red');
ctx.fillRect(0, 0, 150, 200);
ctx.setFillStyle('blue');
ctx.fillRect(150, 0, 150, 200);
ctx.clearRect(30, 30, 150, 75);
ctx.draw();
201807091743082625

canvasContext.fill


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

参数:无

示例:

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

canvasContext.stroke


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

参数:无

示例:

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

canvasContext.beginPath


解释:开始创建一个路径,需要调用 fill 或者 stroke 才会使用路径进行填充或描边。

参数:无

示例:

const ctx = swan.createCanvasContext('myCanvas');
ctx.rect(10, 10, 100, 30);
ctx.setFillStyle('red');
ctx.fill();
ctx.beginPath();
ctx.rect(10, 40, 100, 30);
ctx.setFillStyle('blue');
ctx.fillRect(10, 70, 100, 30);
ctx.rect(10, 100, 100, 30);
ctx.setFillStyle('green');
ctx.fill();
ctx.draw();
201807091743084640

canvasContext.closePath


解释:关闭一个路径。

参数:无

示例:

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

201807091743084027

canvasContext.moveTo


解释:把路径移动到画布中的指定点,不创建线条。

参数:

参数名 类型 说明
x Number 目标位置的 x 坐标
y Number 目标位置的 y 坐标

示例:

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

canvasContext.lineTo


解释:lineTo 方法增加一个新点,然后创建一条从上次指定点到目标点的线。

参数:

参数名 类型 说明
x Number 目标位置的 x 坐标
y Number 目标位置的 y 坐标

示例:

const ctx = swan.createCanvasContext('myCanvas');
ctx.moveTo(10, 10);
ctx.rect(10, 10, 100, 50);
ctx.lineTo(110, 60);
ctx.stroke();
ctx.draw();
201807091743084943

canvasContext.arc


解释:画一条弧线。

参数:

参数名 类型 说明
x Number 圆的 x 坐标
y Number 圆的 y 坐标
r Number 圆的半径
sAngle Number 起始弧度,单位弧度(在3点钟方向)
eAngle Number 终止弧度
counterclockwise Boolean 可选。指定弧度的方向是逆时针还是顺时针。默认是 false,即顺时针。

示例:

const ctx = swan.createCanvasContext('myCanvas');
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.setFillStyle('blue');
ctx.fill();
ctx.draw();
201807091743082177

canvasContext.bezierCurveTo


解释:创建三次方贝塞尔曲线路径。

参数:

参数名 类型 说明
cp1x Number 第一个贝塞尔控制点的 x 坐标
cp1y Number 第一个贝塞尔控制点的 y 坐标
cp2x Number 第二个贝塞尔控制点的 x 坐标
cp2y Number 第二个贝塞尔控制点的 y 坐标
x Number 结束点的 x 坐标
y Number 结束点的 y 坐标

示例:

const ctx = swan.createCanvasContext('myCanvas');
// Draw quadratic curve
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.setStrokeStyle('black');
ctx.stroke();

ctx.draw();
201807091743093043

canvasContext.quadraticCurveTo


解释:创建二次贝塞尔曲线路径。

参数:

参数名 类型 说明
cpx Number 贝塞尔控制点的 x 坐标
cpy Number 贝塞尔控制点的 y 坐标
x Number 结束点的 x 坐标
y Number 结束点的 y 坐标

示例:

const ctx = swan.createCanvasContext('myCanvas');
// Draw quadratic curve
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.setStrokeStyle('blue');
ctx.stroke();

ctx.draw();
201807091743091816

canvasContext.save


解释:保存当前的绘图上下文。

参数:无

示例:

const ctx = swan.createCanvasContext('myCanvas');
// save the default fill style
ctx.save();
ctx.setFillStyle('blue');
ctx.fillRect(10, 10, 150, 100);

// restore to the previous saved state
ctx.restore();
ctx.fillRect(50, 50, 150, 100);

ctx.draw();
201807091743096618

canvasContext.restore


解释:恢复之前保存的绘图上下文。

参数:无

示例:

const ctx = swan.createCanvasContext('myCanvas');
// save the default fill style
ctx.save();
ctx.setFillStyle('blue');
ctx.fillRect(10, 10, 150, 100);

// restore to the previous saved state
ctx.restore();
ctx.fillRect(50, 50, 150, 100);

ctx.draw();
201807091743096618

canvasContext.draw


解释:将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中。

参数:

参数名 类型 说明
callback Function 绘制完成后回调

示例:

const ctx = swan.createCanvasContext('myCanvas');
ctx.setFillStyle('blue');
ctx.fillRect(10, 10, 150, 100);
ctx.draw();
ctx.fillRect(30, 30, 150, 100);
ctx.draw();
201807091743099128
以上内容是否对您有帮助:
二维码
建议反馈
二维码