-
- java家洼 2016-06-24
- 6，使用lerpAngle使小鱼跟着大鱼旋转 接着，我们让小鱼随着大鱼旋转，让它一直看着鱼妈妈，好，我们再来看一下鱼妈妈的角度的lerp过程，我们是计算了鱼妈妈跟鼠标之间的角度，计算这个角度是用它们之间的坐标差计算的，然后鱼妈妈的角度要趋向于这个角度，然后我们旋转一下画布，ok，让我们写小鱼的lerp angle， 我们直接把它复制过来，这是我常用的方法，相似的东西写两遍是很容易出错的事情，我们需要把相应的东西改一下，小鱼是跟着鱼妈妈走的，好，后面不需要改了，然后小鱼的角度要一直趋向于这个角度，然后呢，小鱼再去旋转画布： 不要忘记给小鱼定义angle属性，并且初始化为0； babyObj.prototype.draw=function(){ //lerp x,y this.x=lerpDistance(mom.x,this.x,0.98); this.y=lerpDistance(mom.y,this.y,0.98); //lerp angle var deltaY=mom.y-this.y; var deltaX=mom.x-this.x; var beta=Math.atan2(deltaY,deltaX)+Math.PI; this.angle=lerpAngle(beta,this.angle,0.6); //ctx1 ctx1.save(); //translate() ctx1.translate(this.x,this.y); ctx1.rotate(this.angle); ctx1.drawImage(this.babyTail,-this.babyTail.width*0.5+23,-this.babyTail.height*0.5); ctx1.drawImage(this.babyBody,-this.babyBody.width*0.5,-this.babyBody.height*0.5); ctx1.drawImage(this.babyEye,-this.babyEye.width*0.5,-this.babyEye.height*0.5); ctx1.restore(); } 好，现在应该是没有问题了，好，刷新一下，现在小鱼已经跟着鱼妈妈跑了，哦，不错，挺好的。
- 3赞 · 2采集
-
- java家洼 2016-06-24
- 5，通过lerpDistance使得小鱼跟着大鱼移动 这时候，我们再让小鱼动起来，小鱼动起来就是对于大鱼当前坐标的lerp， 就是让小鱼的坐标一直趋向于大鱼的坐标，我们再来看一下大鱼lerp坐标的过程，让它的坐标值趋向于目标值，现在绘画小鱼的时候，小鱼lerp的目标坐标就是大鱼的坐标， babyObj.prototype.draw=function(){ //lerp x,y this.x=lerpDistance(mom.x,this.x,0.98); this.y=lerpDistance(mom.y,this.y,0.98); //ctx1 ctx1.save(); //translate() ctx1.translate(this.x,this.y); ctx1.drawImage(this.babyTail,-this.babyTail.width*0.5+23,-this.babyTail.height*0.5); ctx1.drawImage(this.babyBody,-this.babyBody.width*0.5,-this.babyBody.height*0.5); ctx1.drawImage(this.babyEye,-this.babyEye.width*0.5,-this.babyEye.height*0.5); ctx1.restore(); } 好，我们刷新一下，小鱼已经跟着大鱼走起来了
- 1赞 · 0采集
-
- java家洼 2016-06-24
- 4，调整小鱼身体部位绘画顺序，使小鱼更逼真 但是尾巴应该在身子的后边，并且眼睛应该在前面，所以这样呢，我们需要先画 尾巴，然后再画body，body画完了再画眼睛，就好像在画布上面一层一层涂一样，那么先画的就在下面，后画的在上面， babyObj.prototype.draw=function(){ //ctx1 ctx1.save(); //translate() ctx1.translate(this.x,this.y); ctx1.drawImage(this.babyTail,-this.babyTail.width*0.5+23,-this.babyTail.height*0.5); ctx1.drawImage(this.babyBody,-this.babyBody.width*0.5,-this.babyBody.height*0.5); ctx1.drawImage(this.babyEye,-this.babyEye.width*0.5,-this.babyEye.height*0.5); ctx1.restore(); } ok，好，小鱼已经画好了，实际上，大鱼也存在顺序的问题，我们来调整一下，先画尾巴，再画body，后画眼睛， 好，再刷新一下，没有问题
- 0赞 · 0采集
-
- java家洼 2016-06-24
- 3，绘制静态的小鱼 现在开始绘制，先把这几张图片画上去， babyObj.prototype.draw=function(){ //ctx1 ctx1.drawImage(this.babyEye,this.x,this.y); ctx1.drawImage(this.babyBody,this.x,this.y); ctx1.drawImage(this.babyTail,this.x,this.y); } 并且把draw放到主循环里， 好，看一下，小鱼已经画上去了，接下来做的是，转移原点的相对坐标，转移相对坐标还记得是哪一个API吗？我们希望里面的方法只适用于小鱼，所以加上ctx1.save()和ctx1.restore()。对其他的内容是不产生影响的，所以要用到save和restore这一对API。我们把原点转移到小鱼的坐标位置，这样this.x和this.y就变成了0,0点，它变成0,0点的时候，绘制的坐标就变了，这个时候应该是0,0对吧，可是这个图片资源也是有宽度的，所以为了把这个图片绘制在以这个原点为中心的位置呢，我们需要做一下调整，减去这个图片资源的一半，同样的，它的y坐标也要减去它的图片资源的高度的一半，这样图片资源的中心就是当前的原点， babyObj.prototype.draw=function(){ //ctx1 ctx1.save(); //translate() ctx1.translate(this.x,this.y); ctx1.drawImage(this.babyEye,-this.babyEye.width*0.5,-this.babyEye.height*0.5); ctx1.drawImage(this.babyBody,-this.babyBody.width*0.5,-this.babyBody.height*0.5); ctx1.drawImage(this.babyTail,-this.babyTail.width*0.5,-this.babyTails.height*0.5); ctx1.restore(); } 好，我们来看一下，好，没有问题，这些图片资源的中心原点就在这个位置，我们需要把尾巴往后移动一点，往后移就需要加一个值，加20，奥，太少，23.好，这个位置差不多
- 0赞 · 0采集
-
- java家洼 2016-06-24
- 2，添加图片属性完善小鱼类的定义 我们绘制小鱼呢，按照之前绘制鱼妈妈的方法，来一步一步回想，第一步先把小鱼的身体图片资源绘制上去，然后第二步是让小鱼 能够动起来，跟着鼠标动，第三步是让小鱼能够旋转，小鱼跟随的并不是我们的鼠标，所以它的移动也不是跟随鼠标的，它应该是跟随鱼妈妈的，它一直跟着妈妈走，所以它的位置和旋转都跟着鱼妈妈，ok，我们先做这些事情，至于它身体的变化，吃到被大鱼拥抱一下的反应，我们后面再来做，我们先把小鱼的图片资源加载进来，定义三个图片变量， var babyObj=function(){ this.x; this.y; this.babyEye=new Image(); this.babyBody=new Image(); this.babyTail=new Image(); } 那么这三个图片类在初始化的时候，对图片资源进行加载， babyObj.prototype.init=function(){ this.x=canWidth*0.5-50; this.y=canHeight*0.5+50; this.babyEye.src="./src/babyEye0.png"; this.babyBody.src="./src/babyFade0.png"; this.babyTail.src="./src/babyTail0.png"; } 好，这样就加载进来了，我们来刷新看一下，ok，没有问题，
- 1赞 · 1采集
-
- java家洼 2016-06-24
- 2-11，小鱼绘制 1，创建小鱼类 接着我们就要来继续下一个任务，绘制小鱼，画小鱼和画大鱼原理是一样的，我们来看一下大鱼跟小鱼，大鱼跟小鱼的图片资源也差不多，都是三张图片，然后小鱼也会有一些动画，除了尾巴的摇动以外呢，身体会变色，如果它一直吃不到果实的话，就是鱼妈妈一直不来救它的话，它就会慢慢的失去颜色，当被大鱼碰到之后呢，它就恢复了颜色，好，我们来看一下小鱼的图片资源，小鱼有一个眼睛眨动的动作，除此以外，它的身体有一个颜色退去的过程，这是一个序列帧，另外，它的尾巴会有一个摇动的动画，也是一个序列帧，画大鱼和画小鱼也能借此复习一下，现在我们先建立一个新的文件，然后保存，叫它baby.js然后把这个js文件包含在html里面，那我们首先先建一个关于小鱼的类，然后定义小鱼的一个变量来继承这个类，babyObj，function，它有坐标位置，另外呢需要初始化，把它初始化在屏幕的中央吧，然后跟大鱼保持一定的距离，注意是在大鱼的下方，让小鱼绘制在第一个canvas上，这样一个基本的类就建立了， var babyObj=function(){ this.x; this.y; } babyObj.prototype.init=function(){ this.x=canWidth*0.5-50; this.y=canHeight*0.5+50; } babyObj.prototype.draw=function(){ //ctx1 } 我们来定义一下小鱼，放在鱼妈妈下面，它继承baby类，并且初始化一下。我们来刷新一下，看有没有问题，没有问题，
- 1赞 · 0采集
数据加载中...