小程序开发-Canvas画布组件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Canvas画布

基本使用方法：

在wxml中添加canvas组件

<canvas canvas-id='canvasDemo' class='demo'></canvas> // canvas-id：必须填写

在对应js中执行绘画具体逻辑

// canvas.js Page({ onReady() { const query = wx.createSelectorQuery() query.select('#canvasDemo') .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.scale(dpr, dpr) ctx.fillRect(0, 0, 100, 100) }) } }) WebGL 示

绘图方法

CanvasContext.setFillStyle(color) 设置填充色

color: 填充的颜色，默认颜色为black
CanvasContext.fill() 对当前路径中的内容进行填充。默认的填充色为黑色。

注意：如果当前路径没有闭合，fill() 方法会将起点和终点进行连接，然后填充。

fill() 填充的的路径是从 beginPath() 开始计算，但是不会将 fillRect() 包含进去。

CanvasContext.setStrokeStyle(color) 设置描边色

color: 填充的颜色，默认颜色为black
CanvasContext.stroke() 画出当前路径的边框。默认颜色色为黑色。

stroke() 描绘的的路径是从 beginPath() 开始计算，但是不会将 strokeRect() 包含进去。
CanvasContext.beginPath() 开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

在最开始的时候相当于调用了一次 beginPath。
同一个路径内的多次 setFillStyle、setStrokeStyle、setLineWidth等设置，以最后一次设置为准。

CanvasContext.closePath() 把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条

x: 目标位置的 x 坐标
y: 目标位置的 y 坐标

CanvasContext.moveTo(x, y) 把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条

x: 目标位置的 x 坐标
y: 目标位置的 y 坐标

CanvasContext.draw(reserve, callback) 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。

reserve: 本次绘制是否接着上一次绘制。即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false
callback: 绘制完成后执行的回调函数