收藏
回答

canvas显示不正常

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug all all 6.6.7

创建的canvas,上面用drawimage点赞上浮的效果在模拟器上有动态效果,真机上没有效果

回答关注问题邀请回答
收藏

2 个回答

  • 是柿子啊
    是柿子啊
    2018-08-10

    你好,你说的动态效果指的canvas做动画处理吗?

    2018-08-10
    有用
    回复 3
    • Egbert Ran
      Egbert Ran
      2018-08-10

      // 点赞函数特效

      drawImage: function (data) {

      var that = this

      var p10 = data[0][0];   // 三阶贝塞尔曲线起点坐标值

      var p11 = data[0][1];   // 三阶贝塞尔曲线第一个控制点坐标值

      var p12 = data[0][2];   // 三阶贝塞尔曲线第二个控制点坐标值

      var p13 = data[0][3];   // 三阶贝塞尔曲线终点坐标值


      var p20 = data[1][0];

      var p21 = data[1][1];

      var p22 = data[1][2];

      var p23 = data[1][3];


      var p30 = data[2][0];

      var p31 = data[2][1];

      var p32 = data[2][2];

      var p33 = data[2][3];


      var t = factor.t;


      /*计算多项式系数 (下同)*/

      var cx1 = 3 * (p11.x - p10.x);

      var bx1 = 3 * (p12.x - p11.x) - cx1;

      var ax1 = p13.x - p10.x - cx1 - bx1;


      var cy1 = 3 * (p11.y - p10.y);

      var by1 = 3 * (p12.y - p11.y) - cy1;

      var ay1 = p13.y - p10.y - cy1 - by1;


      var xt1 = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p10.x;

      var yt1 = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p10.y;


      /** ---------------------------------------- */

      var cx2 = 3 * (p21.x - p20.x);

      var bx2 = 3 * (p22.x - p21.x) - cx2;

      var ax2 = p23.x - p20.x - cx2 - bx2;


      var cy2 = 3 * (p21.y - p20.y);

      var by2 = 3 * (p22.y - p21.y) - cy2;

      var ay2 = p23.y - p20.y - cy2 - by2;


      var xt2 = ax2 * (t * t * t) + bx2 * (t * t) + cx2 * t + p20.x;

      var yt2 = ay2 * (t * t * t) + by2 * (t * t) + cy2 * t + p20.y;



      /** ---------------------------------------- */

      var cx3 = 3 * (p31.x - p30.x);

      var bx3 = 3 * (p32.x - p31.x) - cx3;

      var ax3 = p33.x - p30.x - cx3 - bx3;


      var cy3 = 3 * (p31.y - p30.y);

      var by3 = 3 * (p32.y - p31.y) - cy3;

      var ay3 = p33.y - p30.y - cy3 - by3;


      /*计算xt yt的值 */

      var xt3 = ax3 * (t * t * t) + bx3 * (t * t) + cx3 * t + p30.x;

      var yt3 = ay3 * (t * t * t) + by3 * (t * t) + cy3 * t + p30.y;

      factor.t += factor.speed;

      ctx.drawImage(that.data.clicklove, xt1, yt1, 30, 30);

      ctx.drawImage(that.data.clicklove, xt2, yt2, 30, 30);

      ctx.drawImage(that.data.clicklove, xt3, yt3, 30, 30);

      ctx.draw();

      if (factor.t > 1.1) {

      factor.t = 0;

      cancelAnimationFrame(timer);


      } else {

      timer = requestAnimationFrame(function () {

      that.drawImage(

      [

      [

      { x: 30, y: 400 }, { x: 70, y: 300 }, { x: -50, y: 150 }, { x: 30, y: 0 }

      ],

      [

      { x: 30, y: 400 }, { x: 30, y: 300 }, { x: 80, y: 150 }, { x: 30, y: 0 }

      ],

      [

      { x: 30, y: 400 }, { x: 0, y: 90 }, { x: 80, y: 100 }, { x: 30, y: 0 }

      ]

      ]

      )

      })

      }



      },



      // 开始动画

      startTimer: function () {

      var that = this;

      that.drawImage([

      [

      { x: 30, y: 400 }, { x: 70, y: 300 }, { x: -50, y: 150 }, { x: 30, y: 0 }

      ],

      [

      { x: 30, y: 400 }, { x: 30, y: 300 }, { x: 80, y: 150 }, { x: 30, y: 0 }

      ],

      [

      { x: 30, y: 400 }, { x: 0, y: 90 }, { x: 80, y: 100 }, { x: 30, y: 0 }

      ]

      ])

      }

      这一段没效果

      模拟器上展示是有效果的

      2018-08-10
      回复
    • 是柿子啊
      是柿子啊
      2018-08-10回复Egbert Ran

      你好,请使用代码片段功能提供一下可复现问题的代码片段:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      2018-08-10
      回复
    • Egbert Ran
      Egbert Ran
      2018-08-11回复是柿子啊

      wechatide://minicode/n3mu6AmY7B14

      2018-08-11
      回复
  • 邢洛凡
    邢洛凡
    2018-08-10

    我做的canvas在真机上也有各种问题

    2018-08-10
    有用
    回复 1
    • Egbert Ran
      Egbert Ran
      2018-08-10

      效果显示有问题

      2018-08-10
      回复
登录 后发表内容