canvas实现动画
我是用canvas写出来了静态的canvas图，现在想让这些canvas图动起来，类似于h5的canvas，虽然官方库里的api给了transform,但是在实际使用时，并没有产生任何效果
使用transfrom代码如下
其并没有什么改善
有三个问题，
1、transform如何使用？
2、如何控制整个canvas恢出的图已同等比例放大、缩小、上下左右运动，并保持画布没有变动
3、如何控制canvas绘图中的其中一个图控制其运动动作
4 回复
我换了一种思路，发下可以，
思路大致如下，改变数据，然后重新绘图，但是不知道资源消耗情况会怎么样
试一下在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()
}
})
之前写过一个canvas触摸缩放旋转移动的，但是因为小程序canvas限制，选择原图滑动的时候有bug，渲染层阻塞了touchmove的触发，放弃了，你的需求是可以用canvas实现的，事件触发清空画布再drawImage就行了，
首先，直接设css动画是没效果的。不知道用 wx.createAnimation的方式有没有效果。不过可以把canvas保存成临时文件，然后把路径赋值给 image标签，然后可以给 image标签加你要的特效