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

小程序开发-Canvas画布组件

上一篇:Self Host模式下的ASP. NET Web API是如何进行请求的监听与处理的?


下一篇:微信小程序实现滚动视频自动播放(未优化)