-
素材哪里可以下载呢？查看全部
-
三，那么海葵就做完了。接下来我们要绘制果实。 1.绘制果实的分析： 一个一个的果实漂上去，首先它长大，漂上去，那么API非常简单，就一个drawImage(). 复杂的地方在这里：首先它要在海葵上面慢慢的长大，从无到有长大。长大成熟之后就离开海葵，就开始往 上漂，一直往上漂。直到漂出了屏幕。我们来看一下海葵果实的过程。首先它会从无到有，长出来，长出来之后 呢，就往上漂，而且漂的速度各有不同，像这样的机制怎么样实现呢？首先这么多海葵果实怎么来控制？一般我们 会设立一个池子，这些池子里面有足够数量的果实。每次我们只需要挑选出需要出生的果实，让它出生，开始长大， 长大完之后，开始往上漂，漂出屏幕之后呢，它就死了。我们到时候要做一个判断。所以果实首先它会有两种主要的 状态，它是活跃还是不活跃。那我们怎么区分活跃还是不活跃呢？是什么意思呢？比方说：如果我们的屏幕上大概有 15个果实，我们的整个果实池会设到足够的大，比方说我们会设到30个。这样子呢，只要有需要，有需求，有果实的 需求，那么池子里面肯定有闲着的果实，我们可以拿来用，所以这个池子里面果实数量要足够的多，这个一般是估算 一下有多少个，我们这里有三十个就足够了。这三十个果实有两种状态，一种是闲着，它在排队等着，还有一种状态是 它被指定的一个任务说：你要开始在海葵上生长了，长长长，长大了之后，然后往上漂。漂出了屏幕之后，就告诉它 你的任务完成了，请你回去排队，排队的概念其实就是把它的状态设置到一个闲着的状态。那么对于已经有任务的 海葵，它又分为两种状态，一种就是它长在海葵上面，正在长大，另外一种过程就是漂的过程，ok，这样分析完了之后呢 我们就开始逐步的把整个任务一点一点的剥离开来，我们首先把大的内容写好，然后逐步去写里面的细节，ok，我们 回到浏览器中，我们首先新建一个文件，Ctrl+N，Ctrl+S，叫做fruit.js 好，保存一下，那果实呢，还是和海葵一样 给它定义一个类，然后在类里边设立数组，来控制着很多数量的海葵，查看全部
-
// 获取 canvas context can1 = document.getElementById("canvas1"); //获取画笔 ctx1 = can1.getContext('2d'); 新 api 的写法。查看全部
-
因为动画效果是靠gameloop一次一次地循环载入canvas形成的，如果不清除的话，多次载入的画布会重叠在一起，就形成了重影，也就是看上去线条变宽了一样。而cxt2之所以不用清除，是因为canvas2每次重新载入时都是先载入背景图片，直接就把前一次画布上的东西全覆盖了，所以不用清除。这就是两种清除画布的方法，一种直接调用清除方法，一种用背景覆盖。查看全部
-
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(); } 好，现在应该是没有问题了，好，刷新一下，现在小鱼已经跟着鱼妈妈跑了，哦，不错，挺好的。查看全部
-
1，定义鼠标坐标，给canvas1添加鼠标移动事件 首先在main.js中定义一个有关鼠标的变量：mx和my //定义鼠标的变量 var mx; var my; 并且在main.js中的init方法中初始化mx和my： //初始化鼠标的坐标： mx=canWidth*0.5; my=canHeight*0.5; 好，要捕捉到鼠标的动作呢，首先要canvas添加监测鼠标的事件(在main.js中的init方法中)。我们把这个事件放在canvas1上面，因为canvas1上面画的是大鱼只需要获得鼠标在移动时的坐标值就可以了 can1.addEventListener('mousemove',onMouseMove,false); 这样的话，鼠标在移动的时候，它就可以进行监测了。 addEventListener的语法和参数意思： 语法 element.addEventListener(event, function, useCapture) 参数值 参数 描述 event 必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。 function 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行查看全部
-
设置canvas的宽高，不能在style样式表里面修改，而要在标签里面修改，例如<canvas height='600' width='800'></canvas>.这两种写法是有区别的，canvas对象的默认宽高属性是300、150。第一种修改style，相当于将300*150拉伸至800*600，会变形。第二种是修改canvas对象的默认宽高属性，不会变形。console.log(canWidth,canHeight)会发现是300,150；而不是800,600。所以老师这里实际绘图，图片是先转换成300*150，再缩放为800*600，反复缩放会造成图片失真。视频没出现失真是因为老师用的背景图本来就是800*600，如果换成其他大小的明显图片，比如含文字的1366*768,就能看出区别了。另外，canWidth = can1.width;是获得canvas对象的width属性，不是它的宽度样式。这里没有加var，canWidth是个全局变量，所以之后的作图函数能够直接读取到int（）函数里面的canWidth。也算是var加深了理解查看全部
-
-新API写法：canvas.getContext("2d");查看全部
-
为什么我的鱼是倒着游的查看全部
-
4问：因为canvas1覆盖在canvas2上，所以就要清空，这是为什么？canvas2跟canvas1本身就不是同一个画布，那是怎么影响的呢？ 答：清空的原因不是因为【canvas1覆盖在canvas2上】，教程中从来没这么说。教程中说的是：因为动画一直在循环执行，前一次的图像如果不清除，就会跟后面的图像叠加在一起，使得大鱼小鱼的边线看起来特别粗，所以才要清。打个简单的比方：写满字的黑板如果不擦，继续写上去的字就会跟之前的叠加在一起看不清楚。 5问：请问为什么ctx2每次刷新都不需要ctx2.clearRect(0,0,canWidth, canHeight);？ 答：因为它再一次绘制背景的时候，之前画的已经被新的背景覆盖了。。。按照原理来说，肯定要清空ctx2的，加上ctx2.clearRect(0,0,canWidth, canHeight);页面也是正确的，不信你可以注释掉绘制背景图片那个方法，海葵绘制就出问题了。查看全部
-
7，慕课网课后问答摘抄： 1问：translate()就单独使用这个属性来说是什么意思？ 答：context.translate(x,y)函数可以使画布的原点坐标变为(x,y)，即画笔从这个点开始画。因为我们画完一部分内容之后希望重新定义画笔的属性，所以用context.save()和context.restore()包裹例如context.translate(),context.fillStyle等属性设定。希望能帮助你理解 2问：鱼的坐标问题 ctx1.translate(this.x,this.y); ctx1.drawImage(this.bigBody,-this.bigBody.width*0.5,-this.bigBody.height*0.5); 为什么会是-this.bigBody.width*0.5和-this.bigBody.height*0.5，这个距离是怎么算的 答：如果drawImage方法，没有后面的两个参数，鱼的图片的左上角，就是整个大背景图片的中心位置（即，在translate之后）。加上两个参数的作用可以理解为，使鱼向x轴负方向移动身体的一半，向y轴方向移动身体的一般，把鱼图片的中心点放在当前坐标轴的中心点位置。当然也可以不这么做。 3问：为什么需要清空？没听懂 就是在mom.draw()前那为什么需要？ 答：因为动画效果是靠gameloop一次一次地循环载入canvas形成的，如果不清除的话，多次载入的画布会重叠在一起，就形成了重影，也就是看上去线条变宽了一样。而cxt2之所以不用清除，是因为canvas2每次重新载入时都是先载入背景图片，直接就把前一次画布上的东西全覆盖了，所以不用清除。这就是两种清除画布的方法，一种直接调用清除方法，一种用背景覆盖。查看全部
-
5，利用translate重新定位大鱼各部件坐标 那么这里的坐标都需要全部改一下了： this.bigEye它的位置画在，离原点(this.x,this.y)，大鱼的x坐标往左移this.bigEye.width*0.5这个距离, 同样的，y坐标往上移this.bigEye.height*0.5这个距离:那么眼睛的中心就在零点处了。 ctx1.drawImage(this.bigEye,-this.bigEye.width*0.5,-this.bigEye.height*0.5); 所以，所有的图片都要绘制在中心点，这里替换一下： momObj.prototype.draw=function(){ ctx1.save(); ctx1.translate(this.x,this.y); ctx1.drawImage(this.bigEye,-this.bigEye.width*0.5,-this.bigEye.height*0.5); ctx1.drawImage(this.bigBody,-this.bigBody.width*0.5,-this.bigBody.height*0.5); ctx1.drawImage(this.bigTail,-this.bigTail.width*0.5,-this.bigTail.height*0.5); ctx1.restore(); } 好，我们再刷新一下：好，现在三张图片的中心位置都在这个地方，只是尾巴要往后移一点，我们先把尾巴移出来， 因为眼睛看不到了：绘制尾巴的横坐标再向右移10个px， ctx1.drawImage(this.bigTail,-this.bigTail.width*0.5+10,-this.bigTail.height*0.5); 好，太少了，好，加30， ctx1.drawImage(this.bigTail,-this.bigTail.width*0.5+30,-this.bigTail.height*0.5); 好，差不多，大鱼眼睛这个位置看起来挺好的，那眼睛就不改了，好，大鱼就已经绘制好了 接下来，大鱼要动，对不对，它要随着鼠标来动，这个时候我们就需要获取一下鼠标的位置， 然后大鱼的坐标要跟随着鼠标的位置去移动查看全部
-
4，利用translate()方法将大鱼的坐标设置为画布的原点 但是，大鱼的坐标并不是很对，那么这个大鱼的坐标，我们一是为了方便调节这三张图片之间的相对距离， 同时也有利于我们做大鱼的旋转动作，大鱼需要一直跟着我的鼠标，一直指向我的鼠标。也是为了方便做旋转计算 我们使用前面给大家介绍的translate()这个方法(translate方法的作用：重新映射画布上的(0,0)位置)， 来给它指定一个相对的原点值，好，这个方法仅适用于大鱼，所以这里需要加一个使用的范围： momObj.prototype.draw=function(){ ctx1.save(); ctx1.drawImage(this.bigEye,this.x,this.y); ctx1.drawImage(this.bigBody,this.x,this.y); ctx1.drawImage(this.bigTail,this.x,this.y); ctx1.restore(); } 使我们中间定义的属性仅适用于大鱼， translate到大鱼的坐标位置， ctx1.translate(this.x,this.y); 好，translate到这个位置之后呢， 这个地方就是原点了。查看全部
-
2，将大鱼相关的图片作为属性添加到类中，并初始化时加载这些图片 我们再来看一下大鱼的资源都有哪些？大鱼的是big，大鱼会有眼睛，眼睛会有一个动画，同时身体也会有 一个变化的过程，随着吃到果实的数量不同它的颜色会变，同时它的尾巴还会有一个动画，这就是所有有关 大鱼的资源，那么在第一阶段的课程中呢，我们不做大鱼的动画，仅把大鱼的基本东西描绘出来就行了。 我们先不做动画，所有我们把这些图片资源放在类里面吧。我们定义几个图像属性： var momObj=function(){ this.x; this.y; this.bigEye=new Image(); this.bigBody=new Image(); this.bigTail=new Image(); } 那么在初始化的时候，加载一下图片的资源： momObj.prototype.init=function(){ this.x=0; this.y=0; this.bigEye.src="./src/bigEye0.png"; this.bigBody.src="./src/bigSwim0.png"; this.bigTail.src="./src/bigTail0.png"; } 这样初始化的时候，图片就加载进来了。我们先来刷新一下， 现在我们首先来绘制一下大鱼，看这些资源有没有加载进去， 我们把大鱼的坐标放在canvas的中间： momObj.prototype.init=function(){ this.x=canWidth*0.5; this.y=canHeight*0.5; this.bigEye.src="./src/bigEye0.png"; this.bigBody.src="./src/bigSwim0.png"; this.bigTail.src="./src/bigTail0.png"; }查看全部
-
1，绘制大鱼所用API，定义鱼妈妈类，同时在main.js中定义mom对象并初始化 我们将会用到一些API：translate(); rotate();这两个API是html5 canvas的API。还有一个API是Math.atan2(y,x);反正切，这个 API是JavaScript的API。那我们来分别看一下这几个API的含义： 我们先来看一下反正切这个函数：这个函数是计算里面两个参数的反正切值，这两个参数呢 y在前，x在后，同时要注意一点，它的返回值，是一个数字，它的区间是PI到-PI之间，这点要牢记， 因为等会我们要用到这个知识，我们如何来绘制大鱼，我们还是从最基本的开始：首先我们新建一个文件 ，Ctrl+N，Ctrl+S，然后保存在js文件夹下mom.js ，首先把这个js文件包含在html里面： <script type="text/javascript" src="js/mom.js"></script> 我们把鱼妈妈也定义为一个类。因为鱼妈妈也会有各种各样的属性，首先，它会有一个坐标值，同时我们 肯定也要初始化一下，初始化它的位置，初始化完了之后，我们要在画布上画一条大鱼，要用到 drawImage，这个结构就有了， var momObj=function(){ this.x; this.y; } momObj.prototype.init=function(){ this.x=0; this.y=0; } momObj.prototype.draw=function(){ } 我们把相应的大鱼的对象定义一下: //大鱼的对象 var mom; 同时在main.js的init方法中把它定义为momObj类型，同时进行初始化，并且把draw方法放到gameloop方法中 //new一个大鱼对象并且初始化 mom=new momObj(); mom.init();查看全部
举报
0/150
提交
取消