微信小程序|实现简单动态画布
问题描述
大家都玩过游戏，有没有想过游戏中的人物是怎么动起来的？人物是由很多的图形构成的，我们需要画出这些图形然后再赋予时间，就可以让他动起来。那么如何在小程序上让简单的图动起来呢？
解决方案
实现动图需要用画布组件，也就是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()
}
})表3.2
图3.2
【注】这是一个静态截屏
结语
如果要画一个复杂的图形需要计算每个图形的坐标。用画布画图最重要的就是就是设置图形的属性。上面只是简单介绍了一个动态的圆，如果是要画一个动态的游戏人物是很复杂的需要建模，精确计算位置，所以一个光鲜的游戏人物背后是会花费很多心血的。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-08-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读