-
第二个closePath。 定义和用法 closePath() 方法创建从当前点到开始点的路径。 提示：请使用 stroke() 方法在画布上绘制确切的路径。 提示：请使用 fill() 方法来填充图像（默认是黑色）。请使用 fillStyle 属性来填充另一个颜色/渐变。 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(20,100); ctx.lineTo(70,100); ctx.closePath(); ctx.stroke(); beginPath()告诉场景要开始跳路径了。然后moveTo到哪一个点，然后lineTo到哪一个点，再lineTo到哪一个点，最后closePath，那么 形成一个闭合的路径，查看全部
-
2，绘制海葵 绘制海葵用到了这样一些API： 绘制直线的API：beginPath();closePath();strokeStyle;stroke();lineWidth;lineCap; 这些东西挺多的，好几个，我们到网页上来看一下：这几个API它们都是如何来定义的。 我们打开HTML5 Canvas 参考手册，canvas下面我们要使用的几个API。 第一个：beginPath(),我们挨个来看一下：即便是我写html5游戏呢，写的不少，但是呢，API还是经常要过来看一下， 有的API用的也不是很经常，有时候呢，会生疏。beginPath()我们来看一下它的定义， 定义和用法 beginPath() 方法开始一条路径，或重置当前的路径。 提示：请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。 提示：请使用 stroke() 方法在画布上绘制确切的路径。 我们来看一下它实例里面的东西吧：beginPath，这两条线，开始路径，然后相应的lineTo，下面呢画另外一条线段beginPath， 是开始的点在哪里，然后moveTo在哪里，注意beginPath()后面的括号里是没有参数的，查看全部
-
2，绘制海葵 绘制海葵用到了这样一些API： 绘制直线的API：beginPath();closePath();strokeStyle;stroke();lineWidth;lineCap; 这些东西挺多的，好几个，我们到网页上来看一下：这几个API它们都是如何来定义的。查看全部
-
8， 我们还有一个准备工作，其实它主要是工作了一部分，只是它非常简单，所以把它(绘制背景) 作为准备工作的一部分。好，为了代码清晰，我们首先新建一个文件，ctrl+N,ctrl+S,把它保存到 js文件夹下，命名为background.js 在这个脚本里面。 /* 在这个脚本里面，我们只做绘制background这一件事情，那么刚才说了我们有两个canvas，是有分工的， canvas2是绘制背景的，我们要使用ctx2这个场景，绘制图片，我们有一个背景图片background.jpg 我们直接把这个图片绘制上去，就可以了，那么绘制图片应该用drawImage(pic,locx,locy,w,h) 参数pic指绘制pic这张图绘制在哪里？locx，和locy。这张背景我们肯定是绘制在canvas的从最左上角一直到右下角，那么 讲一下canvas的坐标，canvas的坐标是以canvas的左上角为原点(00点)，x轴向右为正方向，y轴向下 为正方向。现在在main.js文件的开头定义一张背景图片。然后在init方法中加载这张图片，然后 当这张图片加载进来后，把它放到drawImage的第一个参数里。然后第二个和第三个参数表示从哪里 开始绘制，当然是从canvas的00点开始，然后给定宽度和高度。宽和高就是canvas的宽和高 canvas是从左上角原点00点，然后右下角是x轴的正方向，和y轴的正方向，也就是说x轴是向右为正， y轴是向下为正，那么我们再来获取一下canvas的尺寸。因为这两个canvas呢，是一样大的，定义 的尺寸是一样大的，所以我们只需要获取一个就够了(在main.js开头获取)。 获取canvas1的宽和高,然后将获取的宽和高加在background.js中drawImage函数的第4个和第5个 参数里。然后到浏览器中刷新一下，并且要把这个函数drawBackground放在gameloop中。并且 background.js这个脚本文件要加载到html里面来。然后刷新浏览器，背景图片已经绘制好了。 到这里，我的准备工作已经结束了。 */ function drawBackground(){ ctx2.drawImage(bgPic,0,0,canWidth,canHeight); }查看全部
-
7， 在这之后，我们还有一个任务： 也是一个准备工作： 因为requestAnimFrame这个API会导致这个帧的时间间隔，会不统一 不一致，不稳定，所以我们需要知道当前帧执行在两帧之间，执行了多长时间，我们在 main.js的开头定义两个变量lastTime,deltaTime 在game函数中，初始化完之后，给它一个初始值， function game(){ //初始化工作 init(); //我们在初始化完之后，来给lastTime一个初始值，当前时间。 lastTime=Date.now(); //deltaTime首先给一个零值。 deltaTime=0; // gameloop(); } 在gameloop里面呢？我们需要每次更新，每次刷新一下deltaTime。获取一下当前两帧之间间隔是多少。 那我们这时候就需要获得当前时间，var now=Date.now();deltaTime就等于当前时间减去lastTime: deltaTime=now-lastTime;同时需要更新一下上一次的时间：lastTime=now;然后打印一下deltaTime 是否像我刚才说的是一个变化的值:console.log(deltaTime);然后，保存，在浏览器中刷新一下： 我们看到在console中一连串的数字，16,17有时候甚至是15,13，还有20.帧与帧之间的时间间隔是 不稳定的，是在一个区间范围之内浮动的。 做这件事情的意义是什么呢？你想，每一帧间隔的时间相等，里面假设有一个小人在走动，那么每次 给它一个速度，这个时候，它就是在做匀速运动，但是如果每一帧的间隔时间不是固定的，那么就是 一个一直在变化的速度在运动，为了维持游戏角色的运动是平滑的，我们需要使用时间差来调整物体 的运动速度，大家可以记得这个地方，到时候我们在写的时候会去用，结合具体的内容去理解这个东西。 应该说到这个地方，我们所有的准备工作，做了一半了。查看全部
-
6， 我们首先看这个gameloop是否循环起来了？在控制台打印出一个字符loop。然后在 function game(){ //初始化工作 init(); // gameloop(); } 中引用gameloop。我们希望game函数在作为主入口初始化完成之后，来执行第二个 gameloop循环。在浏览器中loop已经在循环打印了。查看全部
-
/* 我们来看看这个打包好的函数做了什么事情： return 返回一个function，如何返回function？根据什么条件？需要根据浏览器的类型， 比如：webkit(safari浏览器，chrome浏览器)，比如mozilla(火狐浏览器)，还包括opera(opera浏览器) ms(微软浏览器)。根据这些浏览器类型去访问，如果所有的都不适应，那我们就用setTimeout， 给它一个固定的帧率的间隔1000 / 60，这是一个打包好的功能，我们就直接使用它，这是我比较 省事的方法，我每次html5游戏的时候，就不需要重新写这些东西，因为这些东西写起来也容易 出错，我每次只需要将整个文件放进来，然后直接引用这个function就可以了。 */ window.requestAnimFrame = (function() { return window.requestAnimationFrame window.webkitRequestAnimationFrame window.mozRequestAnimationFrame window.oRequestAnimationFrame window.msRequestAnimationFrame function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { return window.setTimeout(callback, 1000 / 60); }; })();查看全部
-
5，接下来还有一个关键的知识点：如何让游戏动起来？动起来就是要靠刷新，像动画一样需要一帧一帧的 来画，如何让它来刷新呢？我们需要一个这样的功能gameloop()————游戏循环。比如游戏中，小鱼要不断的 走动，靠每一帧会有一个位移，然后每一帧的位移慢慢相加，就产生了一个动的效果。这个时候需要 一个gameloop。gameloop在js中有专门的API来做这个事情。 requestAnimFrame();这个API怎么来使用：这是一个比较科学的API，相对于setInterval和setTimeout来讲， requestAnimFrame会更科学，为什么呢？requestAnimFrame的原理就是：当前绘制完成之后，去根据你机器 的性能来确定间隔多长时间绘制下一帧，所以它是一个智能计算的过程。而setInterval和setTimeout会有 一个dis的时间，比如我们指定给它每过60ms就绘制一帧，万一你绘制的内容非常大，以至于60ms之内不能 完成，而requestAnimFrame会是一个科学的方法， 但是也有一个问题：fps————frame per second(每秒多少帧). 使用requestAnimFrame会导致帧与帧之间的时间间隔是不固定的，所以有一个动态的时间间隔。 requestAnimFrame在不同的浏览器上面，需要进行配饰，我之前已经写好了不同浏览器下面的配饰，并且 把它打包好————commonFunctions.js 我先把这个文件拷贝过来。拷贝在E:\h5游戏\tityheart\js下。 这是我比较偷懒的一个方法了。先把commonFunctions.js放到html里面。把它加载进来。查看全部
-
1,准备工作： 搭建html网页结构。 绘制背景： 在canvas上面绘制背景。 如何使用canvas API呢？也就是画布已经有了，画笔在哪里？如何引用这些API？ 先进行一些初始化工作。 1.获得canvas1标签 。 2.canvas是画布，context是画笔，可以用画笔在画布上画画了。 3.怎么画呢？当然是使用canvas的API了。 canvas1的场景：canvas的API：getContext()-------->获得场景。 canvas1中绘制： fishes(鱼妈和小鱼),dust(灰尘)，UI(用户界面)，circle（圈圈的特效）:大鱼吃到果实的时候， 会有一个白色圈特效，包括大鱼把食物给小鱼时有个橙色的圈特效，这个特效绘制在canvas1中。 canvas2中绘制：background(背景)，ane(海葵anemone，简写ane),fruits(果实) 4，首先看一下canvas1和canvas2哪个在前，哪个在后？ 我们在定义css的时候，定义了z-index，即顺序。因为两个canvas是被包含在allcanvas的div 里面，那么这两个canvas就有个前后顺序。 z-index的规则是这样的： z-index的值越小，越在后面。值越大，越在前面。 所以canvas1在前面，canvas2在后面。查看全部
-
1.让一个元素脱离文档流，就可以把它放到任意的位置，包括覆盖到其他元素上面。 2.position该 如何使用： 所有主流浏览器都支持 position 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。 定义和用法 position 属性规定元素的定位类型。 说明 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 默认值： static 继承性： no 版本： CSS2 JavaScript 语法： object.style.position="absolute" 可能的值 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit 规定应该从父元素继承 position 属性的值。查看全部
-
html是作为前端页面显示的，canvas就是用来作画用的，把它的宽和高都写在html里面可以很好的查看前端页面的显示参数大小，这样编程更有规范性。查看全部
-
课程内容查看全部
-
document.body.onload=game;查看全部
-
尾部朝着鼠标注意 var beta = Math.atan2(deltaY,deltaX)+Math.PI//-PI PI查看全部
-
第二阶段目标查看全部
举报
0/150
提交
取消