-
第二個(gè)closePath。 定義和用法 closePath() 方法創(chuàng)建從當(dāng)前點(diǎn)到開始點(diǎn)的路徑。 提示：請(qǐng)使用 stroke() 方法在畫布上繪制確切的路徑。 提示：請(qǐng)使用 fill() 方法來填充圖像（默認(rèn)是黑色）。請(qǐng)使用 fillStyle 屬性來填充另一個(gè)顏色/漸變。 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()告訴場(chǎng)景要開始跳路徑了。然后moveTo到哪一個(gè)點(diǎn)，然后lineTo到哪一個(gè)點(diǎn)，再lineTo到哪一個(gè)點(diǎn)，最后closePath，那么 形成一個(gè)閉合的路徑，查看全部
-
2，繪制?？? 繪制?？玫搅诉@樣一些API： 繪制直線的API：beginPath();closePath();strokeStyle;stroke();lineWidth;lineCap; 這些東西挺多的，好幾個(gè)，我們到網(wǎng)頁上來看一下：這幾個(gè)API它們都是如何來定義的。 我們打開HTML5 Canvas 參考手冊(cè)，canvas下面我們要使用的幾個(gè)API。 第一個(gè)：beginPath(),我們挨個(gè)來看一下：即便是我寫html5游戲呢，寫的不少，但是呢，API還是經(jīng)常要過來看一下， 有的API用的也不是很經(jīng)常，有時(shí)候呢，會(huì)生疏。beginPath()我們來看一下它的定義， 定義和用法 beginPath() 方法開始一條路徑，或重置當(dāng)前的路徑。 提示：請(qǐng)使用這些方法來創(chuàng)建路徑：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。 提示：請(qǐng)使用 stroke() 方法在畫布上繪制確切的路徑。 我們來看一下它實(shí)例里面的東西吧：beginPath，這兩條線，開始路徑，然后相應(yīng)的lineTo，下面呢畫另外一條線段beginPath， 是開始的點(diǎn)在哪里，然后moveTo在哪里，注意beginPath()后面的括號(hào)里是沒有參數(shù)的，查看全部
-
2，繪制?？? 繪制海葵用到了這樣一些API： 繪制直線的API：beginPath();closePath();strokeStyle;stroke();lineWidth;lineCap; 這些東西挺多的，好幾個(gè)，我們到網(wǎng)頁上來看一下：這幾個(gè)API它們都是如何來定義的。查看全部
-
8， 我們還有一個(gè)準(zhǔn)備工作，其實(shí)它主要是工作了一部分，只是它非常簡(jiǎn)單，所以把它(繪制背景) 作為準(zhǔn)備工作的一部分。好，為了代碼清晰，我們首先新建一個(gè)文件，ctrl+N,ctrl+S,把它保存到 js文件夾下，命名為background.js 在這個(gè)腳本里面。 /* 在這個(gè)腳本里面，我們只做繪制background這一件事情，那么剛才說了我們有兩個(gè)canvas，是有分工的， canvas2是繪制背景的，我們要使用ctx2這個(gè)場(chǎng)景，繪制圖片，我們有一個(gè)背景圖片background.jpg 我們直接把這個(gè)圖片繪制上去，就可以了，那么繪制圖片應(yīng)該用drawImage(pic,locx,locy,w,h) 參數(shù)pic指繪制pic這張圖繪制在哪里？locx，和locy。這張背景我們肯定是繪制在canvas的從最左上角一直到右下角，那么 講一下canvas的坐標(biāo)，canvas的坐標(biāo)是以canvas的左上角為原點(diǎn)(00點(diǎn))，x軸向右為正方向，y軸向下 為正方向?，F(xiàn)在在main.js文件的開頭定義一張背景圖片。然后在init方法中加載這張圖片，然后 當(dāng)這張圖片加載進(jìn)來后，把它放到drawImage的第一個(gè)參數(shù)里。然后第二個(gè)和第三個(gè)參數(shù)表示從哪里 開始繪制，當(dāng)然是從canvas的00點(diǎn)開始，然后給定寬度和高度。寬和高就是canvas的寬和高 canvas是從左上角原點(diǎn)00點(diǎn)，然后右下角是x軸的正方向，和y軸的正方向，也就是說x軸是向右為正， y軸是向下為正，那么我們?cè)賮慝@取一下canvas的尺寸。因?yàn)檫@兩個(gè)canvas呢，是一樣大的，定義 的尺寸是一樣大的，所以我們只需要獲取一個(gè)就夠了(在main.js開頭獲取)。 獲取canvas1的寬和高,然后將獲取的寬和高加在background.js中drawImage函數(shù)的第4個(gè)和第5個(gè) 參數(shù)里。然后到瀏覽器中刷新一下，并且要把這個(gè)函數(shù)drawBackground放在gameloop中。并且 background.js這個(gè)腳本文件要加載到html里面來。然后刷新瀏覽器，背景圖片已經(jīng)繪制好了。 到這里，我的準(zhǔn)備工作已經(jīng)結(jié)束了。 */ function drawBackground(){ ctx2.drawImage(bgPic,0,0,canWidth,canHeight); }查看全部
-
7， 在這之后，我們還有一個(gè)任務(wù)： 也是一個(gè)準(zhǔn)備工作： 因?yàn)閞equestAnimFrame這個(gè)API會(huì)導(dǎo)致這個(gè)幀的時(shí)間間隔，會(huì)不統(tǒng)一 不一致，不穩(wěn)定，所以我們需要知道當(dāng)前幀執(zhí)行在兩幀之間，執(zhí)行了多長(zhǎng)時(shí)間，我們?cè)? main.js的開頭定義兩個(gè)變量lastTime,deltaTime 在game函數(shù)中，初始化完之后，給它一個(gè)初始值， function game(){ //初始化工作 init(); //我們?cè)诔跏蓟曛?，來給lastTime一個(gè)初始值，當(dāng)前時(shí)間。 lastTime=Date.now(); //deltaTime首先給一個(gè)零值。 deltaTime=0; // gameloop(); } 在gameloop里面呢？我們需要每次更新，每次刷新一下deltaTime。獲取一下當(dāng)前兩幀之間間隔是多少。 那我們這時(shí)候就需要獲得當(dāng)前時(shí)間，var now=Date.now();deltaTime就等于當(dāng)前時(shí)間減去lastTime: deltaTime=now-lastTime;同時(shí)需要更新一下上一次的時(shí)間：lastTime=now;然后打印一下deltaTime 是否像我剛才說的是一個(gè)變化的值:console.log(deltaTime);然后，保存，在瀏覽器中刷新一下： 我們看到在console中一連串的數(shù)字，16,17有時(shí)候甚至是15,13，還有20.幀與幀之間的時(shí)間間隔是 不穩(wěn)定的，是在一個(gè)區(qū)間范圍之內(nèi)浮動(dòng)的。 做這件事情的意義是什么呢？你想，每一幀間隔的時(shí)間相等，里面假設(shè)有一個(gè)小人在走動(dòng)，那么每次 給它一個(gè)速度，這個(gè)時(shí)候，它就是在做勻速運(yùn)動(dòng)，但是如果每一幀的間隔時(shí)間不是固定的，那么就是 一個(gè)一直在變化的速度在運(yùn)動(dòng)，為了維持游戲角色的運(yùn)動(dòng)是平滑的，我們需要使用時(shí)間差來調(diào)整物體 的運(yùn)動(dòng)速度，大家可以記得這個(gè)地方，到時(shí)候我們?cè)趯懙臅r(shí)候會(huì)去用，結(jié)合具體的內(nèi)容去理解這個(gè)東西。 應(yīng)該說到這個(gè)地方，我們所有的準(zhǔn)備工作，做了一半了。查看全部
-
6， 我們首先看這個(gè)gameloop是否循環(huán)起來了？在控制臺(tái)打印出一個(gè)字符loop。然后在 function game(){ //初始化工作 init(); // gameloop(); } 中引用gameloop。我們希望game函數(shù)在作為主入口初始化完成之后，來執(zhí)行第二個(gè) gameloop循環(huán)。在瀏覽器中l(wèi)oop已經(jīng)在循環(huán)打印了。查看全部
-
/* 我們來看看這個(gè)打包好的函數(shù)做了什么事情： return 返回一個(gè)function，如何返回function？根據(jù)什么條件？需要根據(jù)瀏覽器的類型， 比如：webkit(safari瀏覽器，chrome瀏覽器)，比如mozilla(火狐瀏覽器)，還包括opera(opera瀏覽器) ms(微軟瀏覽器)。根據(jù)這些瀏覽器類型去訪問，如果所有的都不適應(yīng)，那我們就用setTimeout， 給它一個(gè)固定的幀率的間隔1000 / 60，這是一個(gè)打包好的功能，我們就直接使用它，這是我比較 省事的方法，我每次html5游戲的時(shí)候，就不需要重新寫這些東西，因?yàn)檫@些東西寫起來也容易 出錯(cuò)，我每次只需要將整個(gè)文件放進(jìn)來，然后直接引用這個(gè)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，接下來還有一個(gè)關(guān)鍵的知識(shí)點(diǎn)：如何讓游戲動(dòng)起來？動(dòng)起來就是要靠刷新，像動(dòng)畫一樣需要一幀一幀的 來畫，如何讓它來刷新呢？我們需要一個(gè)這樣的功能gameloop()————游戲循環(huán)。比如游戲中，小魚要不斷的 走動(dòng)，靠每一幀會(huì)有一個(gè)位移，然后每一幀的位移慢慢相加，就產(chǎn)生了一個(gè)動(dòng)的效果。這個(gè)時(shí)候需要 一個(gè)gameloop。gameloop在js中有專門的API來做這個(gè)事情。 requestAnimFrame();這個(gè)API怎么來使用：這是一個(gè)比較科學(xué)的API，相對(duì)于setInterval和setTimeout來講， requestAnimFrame會(huì)更科學(xué)，為什么呢？requestAnimFrame的原理就是：當(dāng)前繪制完成之后，去根據(jù)你機(jī)器 的性能來確定間隔多長(zhǎng)時(shí)間繪制下一幀，所以它是一個(gè)智能計(jì)算的過程。而setInterval和setTimeout會(huì)有 一個(gè)dis的時(shí)間，比如我們指定給它每過60ms就繪制一幀，萬一你繪制的內(nèi)容非常大，以至于60ms之內(nèi)不能 完成，而requestAnimFrame會(huì)是一個(gè)科學(xué)的方法， 但是也有一個(gè)問題：fps————frame per second(每秒多少幀). 使用requestAnimFrame會(huì)導(dǎo)致幀與幀之間的時(shí)間間隔是不固定的，所以有一個(gè)動(dòng)態(tài)的時(shí)間間隔。 requestAnimFrame在不同的瀏覽器上面，需要進(jìn)行配飾，我之前已經(jīng)寫好了不同瀏覽器下面的配飾，并且 把它打包好————commonFunctions.js 我先把這個(gè)文件拷貝過來。拷貝在E:\h5游戲\tityheart\js下。 這是我比較偷懶的一個(gè)方法了。先把commonFunctions.js放到html里面。把它加載進(jìn)來。查看全部
-
1,準(zhǔn)備工作： 搭建html網(wǎng)頁結(jié)構(gòu)。 繪制背景： 在canvas上面繪制背景。 如何使用canvas API呢？也就是畫布已經(jīng)有了，畫筆在哪里？如何引用這些API？ 先進(jìn)行一些初始化工作。 1.獲得canvas1標(biāo)簽 。 2.canvas是畫布，context是畫筆，可以用畫筆在畫布上畫畫了。 3.怎么畫呢？當(dāng)然是使用canvas的API了。 canvas1的場(chǎng)景：canvas的API：getContext()-------->獲得場(chǎng)景。 canvas1中繪制： fishes(魚媽和小魚),dust(灰塵)，UI(用戶界面)，circle（圈圈的特效）:大魚吃到果實(shí)的時(shí)候， 會(huì)有一個(gè)白色圈特效，包括大魚把食物給小魚時(shí)有個(gè)橙色的圈特效，這個(gè)特效繪制在canvas1中。 canvas2中繪制：background(背景)，ane(?？鸻nemone，簡(jiǎn)寫ane),fruits(果實(shí)) 4，首先看一下canvas1和canvas2哪個(gè)在前，哪個(gè)在后？ 我們?cè)诙xcss的時(shí)候，定義了z-index，即順序。因?yàn)閮蓚€(gè)canvas是被包含在allcanvas的div 里面，那么這兩個(gè)canvas就有個(gè)前后順序。 z-index的規(guī)則是這樣的： z-index的值越小，越在后面。值越大，越在前面。 所以canvas1在前面，canvas2在后面。查看全部
-
1.讓一個(gè)元素脫離文檔流，就可以把它放到任意的位置，包括覆蓋到其他元素上面。 2.position該 如何使用： 所有主流瀏覽器都支持 position 屬性。 注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。 定義和用法 position 屬性規(guī)定元素的定位類型。 說明 這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類型。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。 默認(rèn)值： static 繼承性： no 版本： CSS2 JavaScript 語法： object.style.position="absolute" 可能的值 absolute 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。 fixed 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。 relative 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。 因此，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。 static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值。查看全部
-
html是作為前端頁面顯示的，canvas就是用來作畫用的，把它的寬和高都寫在html里面可以很好的查看前端頁面的顯示參數(shù)大小，這樣編程更有規(guī)范性。查看全部
-
課程內(nèi)容查看全部
-
document.body.onload=game;查看全部
-
尾部朝著鼠標(biāo)注意 var beta = Math.atan2(deltaY,deltaX)+Math.PI//-PI PI查看全部
-
第二階段目標(biāo)查看全部
舉報(bào)
0/150
提交
取消