百度智能小程序API 繪圖

簡介

---

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

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方法，進行繪制上下文的創(chuàng)建：

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

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

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

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

設置顏色，并畫一個圓，填充。

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

3、繪制執(zhí)行上面已經發(fā)出的指令，進行 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)，進行繪圖上下文的創(chuàng)建。

Tips：

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

canvasContext.setFillStyle

---

解釋：設置填充色。

參數(shù)：

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

示例：

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

canvasContext.setStrokeStyle

---

解釋：設置邊框顏色。

參數(shù)：

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

示例：

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

canvasContext.setShadow

---

解釋：設置陰影樣式。

參數(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)建一個線性的漸變顏色。

參數(shù)：

參數(shù)名	類型	說明
x0	Number	起點的 x 坐標
y0	Number	起點的 y 坐標
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)建一個圓形的漸變顏色。

參數(shù)：

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

canvasContext.addColorStop

---

解釋：創(chuàng)建一個顏色的漸變點。

參數(shù)：

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

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

canvasContext.setLineWidth

---

解釋：設置線條的寬度。

參數(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ù)：

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

canvasContext.setLineJoin

---

解釋：設置線條的交點樣式。

參數(shù)：

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

canvasContext.setLineDash

---

解釋：設置線條的寬度。

參數(shù)：

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

---

解釋：設置最大斜接長度，斜接長度指的是在兩條線交匯處內角和外角之間的距離，當 setLineJoin() 為 miter 時才有效，超過最大傾斜長度的，連接處將以 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)建一個矩形。

參數(shù)：

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

canvasContext.fillRect

---

解釋：填充一個矩形。

參數(shù)：

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

canvasContext.strokeRect

---

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

參數(shù)：

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

canvasContext.clearRect

---

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

參數(shù)：

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

canvasContext.fill

---

解釋：對當前路徑中的內容進行填充。默認的填充色為黑色。

參數(shù)：無

示例：

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

canvasContext.stroke

---

解釋：畫出當前路徑的邊框。默認顏色為黑色。

參數(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)建一個路徑，需要調用 fill 或者 stroke 才會使用路徑進行填充或描邊。

參數(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

---

解釋：關閉一個路徑。

參數(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

---

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

參數(shù)：

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

canvasContext.lineTo

---

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

參數(shù)：

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

canvasContext.arc

---

解釋：畫一條弧線。

參數(shù)：

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

canvasContext.bezierCurveTo

---

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

參數(shù)：

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

canvasContext.quadraticCurveTo

---

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

參數(shù)：

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

canvasContext.save

---

解釋：保存當前的繪圖上下文。

參數(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

---

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

參數(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	繪制完成后回調

示例：

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