-
第二個closePath。 定義和用法 closePath() 方法創(chuàng)建從當前點到開始點的路徑。 提示：請使用 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() 方法開始一條路徑，或重置當前的路徑。 提示：請使用這些方法來創(chuàng)建路徑：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軸向下 為正方向?，F(xiàn)在在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會導致這個幀的時間間隔，會不統(tǒng)一 不一致，不穩(wěn)定，所以我們需要知道當前幀執(zhí)行在兩幀之間，執(zhí)行了多長時間，我們在 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.幀與幀之間的時間間隔是 不穩(wěn)定的，是在一個區(qū)間范圍之內浮動的。 做這件事情的意義是什么呢？你想，每一幀間隔的時間相等，里面假設有一個小人在走動，那么每次 給它一個速度，這個時候，它就是在做勻速運動，但是如果每一幀的間隔時間不是固定的，那么就是 一個一直在變化的速度在運動，為了維持游戲角色的運動是平滑的，我們需要使用時間差來調整物體 的運動速度，大家可以記得這個地方，到時候我們在寫的時候會去用，結合具體的內容去理解這個東西。 應該說到這個地方，我們所有的準備工作，做了一半了。查看全部
-
6， 我們首先看這個gameloop是否循環(huán)起來了？在控制臺打印出一個字符loop。然后在 function game(){ //初始化工作 init(); // gameloop(); } 中引用gameloop。我們希望game函數在作為主入口初始化完成之后，來執(zhí)行第二個 gameloop循環(huán)。在瀏覽器中l(wèi)oop已經在循環(huán)打印了。查看全部
-
/* 我們來看看這個打包好的函數做了什么事情： 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()————游戲循環(huán)。比如游戲中，小魚要不斷的 走動，靠每一幀會有一個位移，然后每一幀的位移慢慢相加，就產生了一個動的效果。這個時候需要 一個gameloop。gameloop在js中有專門的API來做這個事情。 requestAnimFrame();這個API怎么來使用：這是一個比較科學的API，相對于setInterval和setTimeout來講， requestAnimFrame會更科學，為什么呢？requestAnimFrame的原理就是：當前繪制完成之后，去根據你機器 的性能來確定間隔多長時間繪制下一幀，所以它是一個智能計算的過程。而setInterval和setTimeout會有 一個dis的時間，比如我們指定給它每過60ms就繪制一幀，萬一你繪制的內容非常大，以至于60ms之內不能 完成，而requestAnimFrame會是一個科學的方法， 但是也有一個問題：fps————frame per second(每秒多少幀). 使用requestAnimFrame會導致幀與幀之間的時間間隔是不固定的，所以有一個動態(tài)的時間間隔。 requestAnimFrame在不同的瀏覽器上面，需要進行配飾，我之前已經寫好了不同瀏覽器下面的配飾，并且 把它打包好————commonFunctions.js 我先把這個文件拷貝過來?？截愒贓:\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(?？鸻nemone，簡寫ane),fruits(果實) 4，首先看一下canvas1和canvas2哪個在前，哪個在后？ 我們在定義css的時候，定義了z-index，即順序。因為兩個canvas是被包含在allcanvas的div 里面，那么這兩個canvas就有個前后順序。 z-index的規(guī)則是這樣的： z-index的值越小，越在后面。值越大，越在前面。 所以canvas1在前面，canvas2在后面。查看全部
-
1.讓一個元素脫離文檔流，就可以把它放到任意的位置，包括覆蓋到其他元素上面。 2.position該 如何使用： 所有主流瀏覽器都支持 position 屬性。 注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。 定義和用法 position 屬性規(guī)定元素的定位類型。 說明 這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。 默認值： static 繼承性： no 版本： CSS2 JavaScript 語法： object.style.position="absolute" 可能的值 absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。 fixed 生成絕對定位的元素，相對于瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。 relative 生成相對定位的元素，相對于其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。 static 默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 inherit 規(guī)定應該從父元素繼承 position 屬性的值。查看全部
-
html是作為前端頁面顯示的，canvas就是用來作畫用的，把它的寬和高都寫在html里面可以很好的查看前端頁面的顯示參數大小，這樣編程更有規(guī)范性。查看全部
-
課程內容查看全部
-
document.body.onload=game;查看全部
-
尾部朝著鼠標注意 var beta = Math.atan2(deltaY,deltaX)+Math.PI//-PI PI查看全部
-
第二階段目標查看全部
舉報
0/150
提交
取消