canvas实现动画
发布于 6 年前 作者 gangqiu 284 次浏览 最后一次编辑是 5 年前 来自 问答

我是用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标签加你要的特效

回到顶部