百度智能小程序API 繪圖

簡介

---

解釋：canvas 畫布，可使用 JS 操作 canvas 上下文，發(fā)出指令，進(jìn)行繪制。

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

我們來回顧一下，剛剛都執(zhí)行了哪些指令：

1、創(chuàng)建繪圖上下文

推薦使用 Page 對象上掛載的createCanvasContext方法，進(jìn)行繪制上下文的創(chuàng)建：

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

當(dāng)然，也可以使用 SWAN 上掛載的createCanvasContext方法。如下，我們調(diào)用 SWAN 的接口createCanvasContext創(chuàng)建了一個(gè)繪制上下文（但請注意，使用 SWAN 上掛載的createCanvasContext，會在當(dāng)前用戶可見的 Page 中尋找canvas）。

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

2、發(fā)送繪制指令

設(shè)置顏色，并畫一個(gè)圓，填充。

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

3、繪制執(zhí)行上面已經(jīng)發(fā)出的指令，進(jìn)行 canvas 繪制。

ctx.draw();

坐標(biāo)系

---

canvas 坐標(biāo)系，以左上角為(0, 0)，橫軸為 x，縱軸為 y。如：ctx.arc(100, 200, 50, 0, 2 * Math.PI);命令，就是在x: 100, y: 200為圓心處，開始畫圓。

createCanvasContext

---

解釋：在 Page 中，推薦使用this.createCanvasContext(canvasId)，進(jìn)行繪圖上下文的創(chuàng)建。

Tips：

也可使用swan.createCanvasContext(canvasId)，但使用swan.createCanvasContext(canvasId)進(jìn)行創(chuàng)建時(shí)，并非在執(zhí)行所在的 Page 對象中使用 canvasId 進(jìn)行查找，而是在用戶當(dāng)前可視的 Page 中使用 canvasId 進(jìn)行查找。

canvasContext.setFillStyle

---

解釋：設(shè)置填充色。

參數(shù)：

參數(shù)名	類型	必填	說明
color	Color	是	設(shè)置的填充顏色

示例：

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

canvasContext.setStrokeStyle

---

解釋：設(shè)置邊框顏色。

參數(shù)：

參數(shù)名	類型	必填	說明
color	Color	是	設(shè)置的邊框顏色

示例：

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

canvasContext.setShadow

---

解釋：設(shè)置陰影樣式。

參數(shù)：

參數(shù)名	類型	范圍	說明
offsetX	Number		陰影相對于形狀在水平方向的偏移
offsetY	Number		陰影相對于形狀在豎直方向的偏移
blur	Number	1 ~ 100	陰影的模糊級別，數(shù)值越大越模糊
color	Color		陰影的顏色

示例：

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

canvasContext.createLinearGradient

---

解釋：創(chuàng)建一個(gè)線性的漸變顏色。

參數(shù)：

參數(shù)名	類型	說明
x0	Number	起點(diǎn)的 x 坐標(biāo)
y0	Number	起點(diǎn)的 y 坐標(biāo)
x1	Number	陰影的模糊級別，數(shù)值越大越模糊
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();

canvasContext.createCircularGradient

---

解釋：創(chuàng)建一個(gè)圓形的漸變顏色。

參數(shù)：

參數(shù)名	類型	說明
x	Number	圓心的 x 坐標(biāo)
y	Number	圓心的 y 坐標(biāo)
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();

canvasContext.addColorStop

---

解釋：創(chuàng)建一個(gè)顏色的漸變點(diǎn)。

參數(shù)：

參數(shù)名	類型	說明
stop	Number(0-1)	表示漸變點(diǎn)在起點(diǎn)和終點(diǎn)中的位置
color	Color	漸變點(diǎn)的顏色

示例：

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

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

canvasContext.setLineWidth

---

解釋：設(shè)置線條的寬度。

參數(shù)：

參數(shù)名	類型	說明
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();

canvasContext.setLineCap

---

解釋：設(shè)置線條的端點(diǎn)樣式。

參數(shù)：

參數(shù)名	類型	范圍	說明
lineCap	String	‘butt’、’round’、’square’	線條的結(jié)束端點(diǎn)樣式

示例：

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

canvasContext.setLineJoin

---

解釋：設(shè)置線條的交點(diǎn)樣式。

參數(shù)：

參數(shù)名	類型	范圍	說明
lineJoin	String	‘bevel’、’round’、’miter’	線條的結(jié)束交點(diǎn)樣式

示例：

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

canvasContext.setLineDash

---

解釋：設(shè)置線條的寬度。

參數(shù)：

參數(shù)名	類型	說明
pattern	Array	一組描述交替繪制線段和間距（坐標(biāo)空間單位）長度的數(shù)字
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();

canvasContext.setMiterLimit

---

解釋：設(shè)置最大斜接長度，斜接長度指的是在兩條線交匯處內(nèi)角和外角之間的距離，當(dāng) setLineJoin() 為 miter 時(shí)才有效，超過最大傾斜長度的，連接處將以 lineJoin 為 bevel 來顯示。

參數(shù)：

參數(shù)名	類型	說明
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();

canvasContext.rect

---

解釋：創(chuàng)建一個(gè)矩形。

參數(shù)：

參數(shù)名	類型	說明
x	Number	矩形路徑左上角的 x 坐標(biāo)
y	Number	矩形路徑左上角的 y 坐標(biāo)
width	Number	矩形路徑的寬度
height	Number	矩形路徑的高度

示例：

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

canvasContext.fillRect

---

解釋：填充一個(gè)矩形。

參數(shù)：

參數(shù)名	類型	說明
x	Number	矩形路徑左上角的 x 坐標(biāo)
y	Number	矩形路徑左上角的 y 坐標(biāo)
width	Number	矩形路徑的寬度
height	Number	矩形路徑的高度

示例：

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

canvasContext.strokeRect

---

解釋：畫一個(gè)矩形(非填充)。

參數(shù)：

參數(shù)名	類型	說明
x	Number	矩形路徑左上角的 x 坐標(biāo)
y	Number	矩形路徑左上角的 y 坐標(biāo)
width	Number	矩形路徑的寬度
height	Number	矩形路徑的高度

示例：

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

canvasContext.clearRect

---

解釋：清除畫布上在該矩形區(qū)域內(nèi)的內(nèi)容。

參數(shù)：

參數(shù)名	類型	說明
x	Number	矩形路徑左上角的 x 坐標(biāo)
y	Number	矩形路徑左上角的 y 坐標(biāo)
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();

canvasContext.fill

---

解釋：對當(dāng)前路徑中的內(nèi)容進(jìn)行填充。默認(rèn)的填充色為黑色。

參數(shù)：無

示例：

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

canvasContext.stroke

---

解釋：畫出當(dāng)前路徑的邊框。默認(rèn)顏色為黑色。

參數(shù)：無

示例：

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

canvasContext.beginPath

---

解釋：開始創(chuàng)建一個(gè)路徑，需要調(diào)用 fill 或者 stroke 才會使用路徑進(jìn)行填充或描邊。

參數(shù)：無

示例：

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

canvasContext.closePath

---

解釋：關(guān)閉一個(gè)路徑。

參數(shù)：無

示例：

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

canvasContext.moveTo

---

解釋：把路徑移動到畫布中的指定點(diǎn)，不創(chuàng)建線條。

參數(shù)：

參數(shù)名	類型	說明
x	Number	目標(biāo)位置的 x 坐標(biāo)
y	Number	目標(biāo)位置的 y 坐標(biāo)

示例：

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

canvasContext.lineTo

---

解釋：lineTo 方法增加一個(gè)新點(diǎn)，然后創(chuàng)建一條從上次指定點(diǎn)到目標(biāo)點(diǎn)的線。

參數(shù)：

參數(shù)名	類型	說明
x	Number	目標(biāo)位置的 x 坐標(biāo)
y	Number	目標(biāo)位置的 y 坐標(biāo)

示例：

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

canvasContext.arc

---

解釋：畫一條弧線。

參數(shù)：

參數(shù)名	類型	說明
x	Number	圓的 x 坐標(biāo)
y	Number	圓的 y 坐標(biāo)
r	Number	圓的半徑
sAngle	Number	起始弧度，單位弧度（在3點(diǎn)鐘方向）
eAngle	Number	終止弧度
counterclockwise	Boolean	可選。指定弧度的方向是逆時(shí)針還是順時(shí)針。默認(rèn)是 false，即順時(shí)針。

示例：

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

canvasContext.bezierCurveTo

---

解釋：創(chuàng)建三次方貝塞爾曲線路徑。

參數(shù)：

參數(shù)名	類型	說明
cp1x	Number	第一個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
cp1y	Number	第一個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
cp2x	Number	第二個(gè)貝塞爾控制點(diǎn)的 x 坐標(biāo)
cp2y	Number	第二個(gè)貝塞爾控制點(diǎn)的 y 坐標(biāo)
x	Number	結(jié)束點(diǎn)的 x 坐標(biāo)
y	Number	結(jié)束點(diǎn)的 y 坐標(biāo)

示例：

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

canvasContext.quadraticCurveTo

---

解釋：創(chuàng)建二次貝塞爾曲線路徑。

參數(shù)：

參數(shù)名	類型	說明
cpx	Number	貝塞爾控制點(diǎn)的 x 坐標(biāo)
cpy	Number	貝塞爾控制點(diǎn)的 y 坐標(biāo)
x	Number	結(jié)束點(diǎn)的 x 坐標(biāo)
y	Number	結(jié)束點(diǎn)的 y 坐標(biāo)

示例：

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

canvasContext.save

---

解釋：保存當(dāng)前的繪圖上下文。

參數(shù)：無

示例：

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

canvasContext.restore

---

解釋：恢復(fù)之前保存的繪圖上下文。

參數(shù)：無

示例：

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

canvasContext.draw

---

解釋：將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中。

參數(shù)：

參數(shù)名	類型	說明
callback	Function	繪制完成后回調(diào)

示例：

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