|
|
一、為什么選擇 HTML5
HTML5 邊玩邊學(xué)算上這篇已經(jīng)是第七篇了，在這篇開始之前，我想先說明一下為什么叫“HTML5”邊玩邊學(xué)，因?yàn)橛腥藢?HTML5 提出質(zhì)疑，畢竟他是一個(gè)新生事物。我承認(rèn)我用 HTML5 來吸引眼球了，如果看過邊玩邊學(xué)系列的每一篇，你會(huì)發(fā)現(xiàn)前六篇文章內(nèi)容的和 HTML5 關(guān)系不是太大，真正的內(nèi)容其實(shí)是 2D 圖形圖像編程的學(xué)習(xí)筆記。
如果我們想學(xué)習(xí) 2D 編程，其實(shí)可供選擇的編程環(huán)境數(shù)不勝數(shù)：MFC、Delphi都有圖形圖像處理功能(即GDI),Java、.NET 更不用說了，如果你支持開源，GTK、QT、wxPython 也是不錯(cuò)的選擇，F(xiàn)lash 更是拿手好戲，甚至幾個(gè)流行的只能手機(jī)平臺應(yīng)該也有 2D 模塊。
如果你選擇了上面任何一款編程環(huán)境學(xué)習(xí) 2D 編程，你會(huì)發(fā)現(xiàn)他們的內(nèi)容基本上是一樣的：線型、填充、顏色、漸變、圖像、組合、裁剪區(qū)、變形等等，甚至連函數(shù)名很多都是一摸一樣，畢竟他們的理論基礎(chǔ)都是圖形學(xué)。
搞清楚我們真正想學(xué)習(xí)什么以后，其實(shí)編程環(huán)境只是個(gè)工具而已，我們根據(jù)個(gè)人喜好，選擇最方便的一款來使用。其實(shí)我更青睞 Python 編程環(huán)境，只是如果我用了Python，估計(jì)跟我交流的人就不會(huì)太多了，大家機(jī)器里安裝 Python 運(yùn)行時(shí)的估計(jì)不會(huì)太多。
那么為什么選擇 HTML5 而不是其他呢？首先，Javascript 語法簡潔靈活，相應(yīng)的函數(shù)庫小巧但是夠用， HTML5 Canvas 標(biāo)簽的 2D 表現(xiàn)能力也達(dá)到了要求，Chrome 瀏覽器的運(yùn)行速度讓人滿意。除此之外，我們不用安裝笨重的集成開發(fā)環(huán)境，不需要安裝運(yùn)行時(shí)，我們只需要一個(gè)加強(qiáng)功能的記事本、一個(gè)瀏覽器就可以去實(shí)踐我們的想法，并且直接將效果呈現(xiàn)在網(wǎng)絡(luò)上。我們只是發(fā)表文章同其他人分享自己的想法而已，至于平臺、框架、語言特性，這些無關(guān)的東西當(dāng)然牽扯的越少越好，這就是我選擇 HTML5 的原因。
所以，請大家不要誤解了標(biāo)題的含義：這個(gè)系列并不是 HTML5 的學(xué)習(xí)筆記，而只是用 HTML5 來展現(xiàn)一些知識內(nèi)容而已，你更多關(guān)注的應(yīng)該是知識和內(nèi)容本身，你可以在任何其他一款編程環(huán)境下再現(xiàn)他們。
二、動(dòng)畫初步
動(dòng)畫就是一系列連續(xù)的畫面按順序呈現(xiàn)出來而已，只是，在電影電視中，這些畫面實(shí)現(xiàn)已經(jīng)被準(zhǔn)備好了，而在電腦程序中，我們見到每一瞬間的畫面都是即時(shí)繪制的，大體流程可以表述如下：
a、輕微改變圖形的數(shù)據(jù)（坐標(biāo)、形狀、顏色等等）
b、清空畫布
c、繪制圖形
d、回到步驟 a
當(dāng)然，這里只是給出了一個(gè)最簡單的流程框架，要實(shí)現(xiàn)復(fù)雜的動(dòng)畫可能還要考慮更多的問題，比如局部清除、碰撞檢測之類的。
另外，繪制過程中有兩個(gè)速度需要控制：
第一個(gè)是繪制速度，即每秒鐘繪制多少次（幀），或者也可以這樣說，每一幀暫停多少時(shí)間。如果你的動(dòng)畫每一幀都是一個(gè)樣子，只是位置不同，這個(gè)速度影響不大。
第二個(gè)圖形移動(dòng)的速度。
所以，千萬不要把這兩個(gè)速度搞混了，繪制的越快，只能代表動(dòng)畫更流暢，但并不代表你的圖像移動(dòng)的更快。
使用 HTML5 繪制動(dòng)畫基本上就是上面這個(gè)流程，只是你還需要注意兩點(diǎn)：
1、為了方便繪制的圖形，我們經(jīng)常會(huì)改變上下文對象的的狀態(tài)，所以在繪制圖形前后，千萬別忘了保存和恢復(fù)狀態(tài)，如果你不太了解狀態(tài)是什么，請看前面的一篇文章《HTML5邊玩邊學(xué)（6）：汽車人，變形......》
2、我們需要將整個(gè)繪制動(dòng)作放到定時(shí)器里面，否則整個(gè)瀏覽器將失去響應(yīng)。Javascript 有兩個(gè)定時(shí)器方法，分別是：
setInterval(code,millisec) 和 setTimeout(code,millisec)
這兩個(gè)方法我就介紹了，可以去 Google 相關(guān)的資料。
下面我們給出一個(gè)上下移動(dòng)方塊的小動(dòng)畫，當(dāng)遇到頂部或者底部時(shí)，會(huì)改變方向。代碼如下：
<canvas id="canvas1" width="250" height="300" style="background-color:black">
你的瀏覽器不支持 Canvas 標(biāo)簽，請使用 Chrome 瀏覽器 或者 FireFox 瀏覽器
</canvas><br/>
幀數(shù)：<input id="txt1" type="text" value="25"/><br/>
每次移動(dòng)距離：<input type="text" id="txt2" value="10"/><br/>
<input type="button" value="開始" onclick="move_box()"/>
<input type="button" value="暫停" onclick="stop()"/>
<script type="text/Javascript">
//定時(shí)器
var interval=null;
//停止動(dòng)畫
function stop(){
clearInterval(interval);
}
//===================================================================
//基本動(dòng)畫
//====================================================================
function move_box(){
//停止動(dòng)畫
stop();
//移動(dòng)速度
var delta=parseInt(document.getElementById('txt1').value);
//每秒繪制多少次
var fps=parseInt(document.getElementById('txt2').value);
//畫布對象
var canvas=document.getElementById("canvas1")
//獲取上下文對象
var ctx = canvas.getContext("2d");
//設(shè)置顏色
ctx.fillStyle="red";
//方塊的初始位置
var x=100;var y=50;
//方塊的長度和寬度
var w=30;var h=30;
//開始動(dòng)畫
interval = setInterval(function(){
//改變 y 坐標(biāo)
y=y+delta;
//上邊緣檢測
if(y<0){
y=0;
delta=-delta;
}
//下邊緣檢測
if((y+h)>canvas.getAttribute("height")){
y=canvas.getAttribute("height")-h;
delta=-delta;
}
//清空畫布
ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));
//保存狀態(tài)
ctx.save();
//移動(dòng)坐標(biāo)
ctx.translate(x,y);
//重新繪制
ctx.fillRect(0,0,w,h);
//恢復(fù)狀態(tài)
ctx.restore();
},1000/fps);
}
</script>
it知識庫：HTML5邊玩邊學(xué)（7）：動(dòng)畫初步 之 飛舞的精靈，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
