我是用canvas写出来了静态的canvas图,现在想让这些canvas图动起来,类似于h5的canvas,虽然官方库里的api给了transform,但是在实际使用时,并没有产生任何效果
使用transfrom代码如下
其并没有什么改善
有三个问题,
1、transform如何使用?
2、如何控制整个canvas恢出的图已同等比例放大、缩小、上下左右运动,并保持画布没有变动
3、如何控制canvas绘图中的其中一个图控制其运动动作
试一下在touchmove transform之后重新画一下canvas,并再次调用ctx.draw()方法
Page({
onLoad() {
const ctx = wx.createCanvasContext(‘myCanvas’)
// 第一次渲染
this.render(ctx)
// 模拟touchmove
setTimeout(() => {
ctx.translate(10, 10)
// 变化之后重新渲染
this.render(ctx)
}, 1000)
},
render(ctx) {
ctx.fillStyle = “yellow”
ctx.fillRect(50, 50, 250, 100)
// 再次调用draw方法
ctx.draw()
}
})