微信小程序|实现简单动态画布

算法与编程之美

发布于 2020-08-20 07:10:36

1.7K00

代码可运行

文章被收录于专栏：算法与编程之美算法与编程之美

运行总次数：0

代码可运行

问题描述

大家都玩过游戏，有没有想过游戏中的人物是怎么动起来的？人物是由很多的图形构成的，我们需要画出这些图形然后再赋予时间，就可以让他动起来。那么如何在小程序上让简单的图动起来呢？

解决方案

实现动图需要用画布组件，也就是canvas画布。首先调用canvas组件，然后再对图形的属性进行设置：位置，线条，形状，颜色，时间等。如果要制作较复杂的图形还需要计算图形的起始和终止位置。下面通过一个圆的例子来介绍画布。

（1）在wxml中调用canvas组件

绑定手指点击事件bindtouchstart="btnclick"

图3.1

<view>

<canvas style="width: 100%; height: 400px; background:yellow;" canvas-id="firstCanvas"bindtouchstart="btnclick" >

// bindtouchstart="btnclick" 手指触摸动作开始

</canvas>

</view>

表3.1

（2）在js中对图形属性进行设置

设置图形的起始角度、终止角度、半径、方向和时间

Page({

  canvasIdErrorCallback: function (e) {

    console.error(e.detail.errMsg)

  },

 //起点从（0，0）开始

  pos: {

    x: 0,

    y: 0

  },

 

  onReady: function (e) {

    this.draw()

  },

    //每50ms进行一次

  btnclick: function () {

    setInterval(this.draw, 50)

  },

//向x++，y++方向移动

  draw: function () {

    this.pos.x++;

    this.pos.y++;

    //使用 wx.createContext 获取绘图上下文 context

    var context = wx.createCanvasContext('firstCanvas')

 

    //半径为60，起始角度0°，终止角度2π，顺时针绘制

    context.arc(this.pos.x, this.pos.y, 50, 0, 2 * Math.PI, false)

 

    context.stroke()

    context.draw()

  }

})