建站
咨詢
售后
建站咨詢
新聞中心
1.了解canvas元素
創(chuàng)新互聯(lián)建站專注于禹王臺企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),成都做商城網(wǎng)站。禹王臺網(wǎng)站建設(shè)公司,為禹王臺等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站開發(fā)，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)
學(xué)習(xí)了canvas元素后,感覺能不用插件在頁面上畫圖很好,就深入了解了一下.我愿意把我學(xué)習(xí)到的分享出來,一來給初學(xué)者一點幫助,二來可以讓大家指出我的不足之處.在下還只是在學(xué)習(xí)階段.希望得到高人的指點哈.
本系列致力于簡單的動畫特效,或者游戲特效.我會將我的思考一步一步講述出來.可能會很基礎(chǔ).但是一定能帶你走進(jìn)這個新奇的元素. 希望與君共學(xué)習(xí). Let us begin!
今天是第一天,我開始學(xué)習(xí)了canvas中的API.知道這是一個畫布元素,要想在里面畫東西,就要得到它的上下文(有的也叫繪圖環(huán)境).利用這個上下文,用JS調(diào)用API.從而在畫布上顯示圖像.例如這樣:
初識 canvas
可以看到頁面上有一個小方塊,這就是canvas元素,可以在里面進(jìn)行繪圖了.canvas默認(rèn)的大小是300*150.可以看出canvas元素就和其他的元素是一樣的,是頁面描述的一部分而已.
那么先來畫一個圖形吧.恩! 看看下面的代碼.
這些API都可以在W3C中找到,由于這不是本文的重點,就不累述了.只是要注意的幾點(也是在下在學(xué)習(xí)的過程中遇到的問題).
1.要fill(),stroke()是把路徑填充顯示出來的.用的路徑的話,一定要記得清除路徑,就是beginPath().
2.刷新canvas有2中方法,一個是clearRect(),這個不僅可以清除canvas中所以的圖像,還可以清除一部分,從而創(chuàng)造出復(fù)雜的圖像,但是它不會清除畫筆.還有一個是改變canvas的大小,默認(rèn)改變canvas的大小后,canvas中的圖像清除,還有畫筆也會被清除,就是默認(rèn)的黑色.
下面是我寫的小球碰撞試驗,雖然這種代碼很多,但是這是基礎(chǔ).有了這個基礎(chǔ),就離我的目標(biāo)進(jìn)了一步,要問我的目標(biāo)是什么,就是用canvas寫游戲啦.
初識 canvas
動畫: 由幀構(gòu)成, 所以叫補(bǔ)幀動畫.
每一幀就是一附圖片,人的眼睛有視覺停留的功能,大約每秒能看24附圖片.然后這些圖片經(jīng)過大腦的加工,就讓人感覺到物體在移動了.所以,動畫就是圖片,在這樣就是canvas中的內(nèi)容,只要canvas中的內(nèi)容改變,就能形成動畫了.
這種寫法不是很科學(xué),但是,能夠?qū)崿F(xiàn)我想要的效果,記得一位大師說過,寫代碼不一定要多么的復(fù)雜,只要是你想要的結(jié)果,那什么代碼都行.在這個基礎(chǔ)上,可以實現(xiàn)碰撞后改變球的顏色,大小等.
也可以碰撞后減小速度.這不就是一個臺球嗎?雖然不是很完善,但有了這種思想,就一定OK的了.附上小球改變大小的實例. 還可以改變更多東西,你能想到的,就去實現(xiàn)吧.
初學(xué)者大多都是這樣寫的吧,我也不例外,但是在以后的代碼中,這種就會很少出現(xiàn)了.應(yīng)為JS是面向?qū)ο蟮?那就用面向?qū)ο蟮膩韺懓? 明天繼續(xù) 今天就到這里吧
下面是小球運(yùn)動改變大小的代碼: 希望能想到更多的東西.
初識 canvas
標(biāo)題名稱：HTML5canvas動畫基礎(chǔ)自學(xué)分享1
文章地址：http://fisionsoft.com.cn/article/pooosh.html
