canvas

canvas

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

示例

代码示例

SWAN
JS

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

我们来回顾一下，刚刚都执行了哪些指令：

1、创建绘图上下文

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

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

当然，也可以使用 SWAN 上挂载的createCanvasContext方法。如下，我们调用 SWAN 的接口createCanvasContext创建了一个绘制上下文。

注意：使用 SWAN 上挂载的 createCanvasContext ，会在当前用户可见的 Page 中寻找 canvas ，所以推荐 Page 对象上挂载的 createCanvasContext 方法。

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

2、发送绘制指令

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

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

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

CanvasContext.draw();

坐标系

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

我们可以在 canvas 中加上一些事件，来观测它的坐标系。

代码示例:

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<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 无法做到渐变色的效果，可以选择使用透明框，新增返回按钮，然后进行设置。或将 navigationStyle 设置成 custom，在全屏页面中制作导航栏，自定义背景色。

代码示例

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

<canvas canvas-id="myCanvas" class="myCanvas"/>
</canvas>
<view>内容</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();
    }
});