小程序开发-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 示

绘图方法

1. CanvasContext.setFillStyle(color) 设置填充色
   
   color: 填充的颜色，默认颜色为black

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

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

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

1. CanvasContext.setStrokeStyle(color) 设置描边色
   
   color: 填充的颜色，默认颜色为black

2. CanvasContext.stroke() 画出当前路径的边框。默认颜色色为黑色。
   
   stroke() 描绘的的路径是从 beginPath() 开始计算，但是不会将 strokeRect() 包含进去。

3. CanvasContext.beginPath() 开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边

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

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

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

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

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

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

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

1. CanvasContext.rect(x, y, width, height) 创建一个矩形路径。需要用 fill或者 stroke 方法将矩形真正的画到 canvas 中

• x: 矩形路径左上角的横坐标
• y: 矩形路径左上角的纵坐标
• width: 矩形路径的宽度
• height: 矩形路径的高度

1. CanvasContext.fillRect(x, y, width, height) 填充一个矩形。用 setFillStyle 设置矩形的填充色，如果没设置默认是黑色。

• x: 矩形路径左上角的横坐标
• y: 矩形路径左上角的纵坐标
• width: 矩形路径的宽度
• height: 矩形路径的高度

1. CanvasContext.lineTo(x, y) 增加一个新点，然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条

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