问答详情
源自:3-6 海葵摆动动画

正常海葵能画出,加上贝塞尔曲线函数之后 看不到海葵,但不报错 求老师解答!@daisy

老师,从开头看到现在真的受益良多。我也一直在跟着做,做到这一节《海葵动画》的时候,遇到了一个问题,我不希望这么完美的游戏有一个不完美的结局。。。还希望老师看到之后替我解答一下,真的会不胜感激!

 1.  这里是demo 地址: http://www.jzkjarson.com/mobileApp/index.html 2. 我把所有的js都写在了index.js里,但是我的注释都写的很清楚,很好理解。

3. 问题:

    我的海葵动画没有生效,就是在indx.js的190行,结束点的横坐标我写了rootx[i],这样能够正确的画出海葵,但是当我加上rootx[i] + l * this.amp[i]的时候,海葵全部消失,并且没有报错。我也调试过了,l和amp[i]的值都没有错。

4.我调试了很久,但是没有找到原因,希望老师看到,能看看我的代码,帮忙调试一下,找到错误原因,在此先多谢老师了!


提问者:唠嗑你别老得太快 2015-11-01 21:19

个回答

  • ImME3815475
    2016-09-01 18:14:29

    我也是这个问题!!找了半天没找到什么原因!!!求大家帮忙检查下!!!

  • ImME3815475
    2016-09-01 18:13:47

    var aneObj=function()

    { //start point,control point,end point


    this.rootx=[];

    this.headx=[];

    this.heady=[];

    this.alpha=0;

    this.amp=[];

    }

    aneObj.prototype.num=50;

    aneObj.prototype.init=function()

    {

    for(var i=0;i<this.num;i++)

    {

    this.rootx[i]=i*19+Math.random()*20;

    this.headx[i]=this.rootx;

    this.heady[i]=canheight-200+Math.random()*50;

    this.amp[i]=Math.random()*50+100;

    }


    }

    aneObj.prototype.draw=function()

    {

    this.alpha+=deltaTime*0.001;

    var l=Math.sin(this.alpha);

    ctx2.save();

    ctx2.globalAlpha=0.5;

    ctx2.lineWidth=16;

    ctx2.lineCap="round";

    ctx2.strokeStyle="#1AE6E6";

    for(var i=0;i<this.num;i++)

    //beginpath,moveto,lineto,stroke

    { ctx2.beginPath();

    ctx2.moveTo(this.rootx[i],canheight);

    ctx2.quadraticCurveTo(this.rootx[i],canheight-150,this.headx[i]+l*this.amp[i],this.heady[i]);

    ctx2.stroke();


    }

    ctx2.restore();


    }


  • 姑娘有点太傲娇
    2016-01-14 15:45:42

    你的amp没加[i]值吧  我的就是这个问题

  • 姑娘有点太傲娇
    2016-01-14 15:40:14

    你的问题解决了么?我也遇到相同的问题了

  • qq_痞子陈_0
    2015-12-16 15:08:39

    建议把老师画贝塞尔曲线的视频再看一遍,我都是跟着老师做,完全正常。说明你肯定是漏了某个细节。