收藏
回答

canvas实现动画

我是用canvas写出来了静态的canvas图,现在想让这些canvas图动起来,类似于h5的canvas,虽然官方库里的api给了transform,但是在实际使用时,并没有产生任何效果

使用transfrom代码如下


其并没有什么改善

有三个问题,

1、transform如何使用?

2、如何控制整个canvas恢出的图已同等比例放大、缩小、上下左右运动,并保持画布没有变动

3、如何控制canvas绘图中的其中一个图控制其运动动作

最后一次编辑于  2018-08-28
回答关注问题邀请回答
收藏

4 个回答

  • 小程序技术专员-Eric
    小程序技术专员-Eric
    2018-08-28

    试一下在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()

        }

    })

    2018-08-28
    赞同 1
    回复 1
    • 枫语
      枫语
      2018-08-29

      我就是这么写的


      2018-08-29
      回复
  • 木剑温小二
    木剑温小二
    2018-08-30

    之前写过一个canvas触摸缩放旋转移动的,但是因为小程序canvas限制,选择原图滑动的时候有bug,渲染层阻塞了touchmove的触发,放弃了,你的需求是可以用canvas实现的,事件触发清空画布再drawImage就行了,

    2018-08-30
    赞同
    回复
  • 枫语
    枫语
    2018-08-28

    我换了一种思路,发下可以,

    思路大致如下,改变数据,然后重新绘图,但是不知道资源消耗情况会怎么样

    2018-08-28
    赞同
    回复 1
    • 卢霄霄
      卢霄霄
      2018-08-28

      canvas本身不大,内容不是很复杂,就不会有啥性能问题哎

      2018-08-28
      回复
  • 卢霄霄
    卢霄霄
    2018-08-28


    首先,直接设css动画是没效果的。不知道用 wx.createAnimation的方式有没有效果。不过可以把canvas保存成临时文件,然后把路径赋值给 image标签,然后可以给 image标签加你要的特效

    2018-08-28
    赞同
    回复 6
    • 陈yob
      陈yob
      2018-08-29

      1、wxml


      2、wxss


      3、js





      想问一下,似乎没有 css3 的过度效果,怎么回事呀? 还望解答一二


      2018-08-29
      回复
    • 卢霄霄
      卢霄霄
      2018-08-29回复陈yob

      你界面上写成了 is_slick ?

      2018-08-29
      回复
    • 陈yob
      陈yob
      2018-08-29回复卢霄霄

      看来得擅长 c v ,不能老是自信手写 233333。 谢谢啦,感觉程序猿最热心啦

      2018-08-29
      回复
    • 卢霄霄
      卢霄霄
      2018-08-29回复陈yob

      噗嗤~ 程序员就是要有自信

      2018-08-29
      回复
    • 陈yob
      陈yob
      2018-08-29回复卢霄霄

      想问一下,个人开发的小程序需要 数据库 的数据,是不是还要自己准备域名和 服务器,然后进行搭建呀?  还是需要别的什么呢?

      2018-08-29
      回复
    查看更多(1)