1.了解canvas元素
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),固安企業(yè)網(wǎng)站建設(shè),固安品牌網(wǎng)站建設(shè),網(wǎng)站定制,固安網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,固安網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。學習了canvas元素后,感覺能不用插件在頁面上畫圖很好,就深入了解了一下.我愿意把我學習到的分享出來,一來給初學者一點幫助,二來可以讓大家指出我的不足之處.在下還只是在學習階段.希望得到高人的指點哈.
本系列致力于簡單的動畫特效,或者游戲特效.我會將我的思考一步一步講述出來.可能會很基礎(chǔ).但是一定能帶你走進這個新奇的元素. 希望與君共學習. Let us begin!
今天是第一天,我開始學習了canvas中的API.知道這是一個畫布元素,要想在里面畫東西,就要得到它的上下文(有的也叫繪圖環(huán)境).利用這個上下文,用JS調(diào)用API.從而在畫布上顯示圖像.例如這樣:
可以看到頁面上有一個小方塊,這就是canvas元素,可以在里面進行繪圖了.canvas默認的大小是300*150.可以看出canvas元素就和其他的元素是一樣的,是頁面描述的一部分而已.
那么先來畫一個圖形吧.恩! 看看下面的代碼.
這些API都可以在W3C中找到,由于這不是本文的重點,就不累述了.只是要注意的幾點(也是在下在學習的過程中遇到的問題).
1.要fill(),stroke()是把路徑填充顯示出來的.用的路徑的話,一定要記得清除路徑,就是beginPath().
2.刷新canvas有2中方法,一個是clearRect(),這個不僅可以清除canvas中所以的圖像,還可以清除一部分,從而創(chuàng)造出復(fù)雜的圖像,但是它不會清除畫筆.還有一個是改變canvas的大小,默認改變canvas的大小后,canvas中的圖像清除,還有畫筆也會被清除,就是默認的黑色.
下面是我寫的小球碰撞試驗,雖然這種代碼很多,但是這是基礎(chǔ).有了這個基礎(chǔ),就離我的目標進了一步,要問我的目標是什么,就是用canvas寫游戲啦.
動畫: 由幀構(gòu)成, 所以叫補幀動畫.
每一幀就是一附圖片,人的眼睛有視覺停留的功能,大約每秒能看24附圖片.然后這些圖片經(jīng)過大腦的加工,就讓人感覺到物體在移動了.所以,動畫就是圖片,在這樣就是canvas中的內(nèi)容,只要canvas中的內(nèi)容改變,就能形成動畫了.
這種寫法不是很科學,但是,能夠?qū)崿F(xiàn)我想要的效果,記得一位大師說過,寫代碼不一定要多么的復(fù)雜,只要是你想要的結(jié)果,那什么代碼都行.在這個基礎(chǔ)上,可以實現(xiàn)碰撞后改變球的顏色,大小等.
也可以碰撞后減小速度.這不就是一個臺球嗎?雖然不是很完善,但有了這種思想,就一定OK的了.附上小球改變大小的實例. 還可以改變更多東西,你能想到的,就去實現(xiàn)吧.
初學者大多都是這樣寫的吧,我也不例外,但是在以后的代碼中,這種就會很少出現(xiàn)了.應(yīng)為JS是面向?qū)ο蟮?那就用面向?qū)ο蟮膩韺懓? 明天繼續(xù) 今天就到這里吧
下面是小球運動改變大小的代碼: 希望能想到更多的東西.
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
