百度智能小程序 画布

2020-09-05 14:20 更新

canvas

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

示例

代码示例 

在开发者工具中打开

<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)。

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 中加上一些事件,来观测它的坐标系。

代码示例:  在开发者工具中打开

<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,在全屏页面中制作导航栏,自定义背景色。

代码示例 

 在开发者工具中打开

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号