百度智能小程序 畫布

canvas

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

示例

代碼示例 

在開發(fā)者工具中打開

<canvas canvas-id="myCanvas" />

Page({
    onLoad() {
        const CanvasContext = this.createCanvasContext('myCanvas');
        CanvasContext.setFillStyle('#ff0000');
        CanvasContext.arc(100, 100, 50, 0, 2 * Math.PI);
        CanvasContext.fill();
        CanvasContext.draw();
    }
});

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

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

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

Page({
    onLoad () {
        const CanvasContext = this.createCanvasContext('myCanvas');
    }
});

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

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

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

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

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

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

CanvasContext.draw();

坐標(biāo)系

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

我們可以在 canvas 中加上一些事件，來觀測它的坐標(biāo)系。

代碼示例:  在開發(fā)者工具中打開

<canvas canvas-id="myCanvas"
    style="margin: 5px; border:1px solid #d3d3d3;"
    bindtouchstart="start"
    bindtouchmove="move"
    bindtouchend="end" />
<view hidden="{{hidden}}">
    Coordinates: ({{x}}, {{y}})
</view>

Page({
    data: {
        x: 0,
        y: 0,
        hidden: true
    },
    start(e) {
        this.setData({
            hidden: false,
            x: e.touches[0].x,
            y: e.touches[0].y
        })
    },
    move(e) {
        this.setData({
            x: e.touches[0].x,
            y: e.touches[0].y
        })
    },
    end(e) {
        this.setData({
            hidden: true
        })
    }
});

常見問題

Q：小程序頁面頭部可否支持漸變色？

A：使用 navigationBarBackgroundColor 無法做到漸變色的效果，可以選擇使用透明框，新增返回按鈕，然后進(jìn)行設(shè)置?；?qū)?navigationStyle 設(shè)置成 custom，在全屏頁面中制作導(dǎo)航欄，自定義背景色。

代碼示例 

 在開發(fā)者工具中打開

<canvas canvas-id="myCanvas" class="myCanvas"/>
</canvas>
<view>內(nèi)容</view>

Page({
    onLoad() {
        const canvasContext = this.createCanvasContext('myCanvas');
        const grd = canvasContext.createLinearGradient(0, 0, 200, 200);
        grd.addColorStop(0, 'blue');
        grd.addColorStop(1, 'red');
        canvasContext.setFillStyle(grd);
        canvasContext.fillRect(0, 0, 800, 100);
        canvasContext.draw();
    }
});