html5 canvas-1.canvas介紹(hello canvas)_HTML5教程
推薦:html5 Canvas畫(huà)圖教程(7)—canvas里畫(huà)曲線之quadraticCurveTo方法今天講quadraticCurveTo方法畫(huà)曲線,quadratic的意思是二次,即數(shù)學(xué)中二次元方程那個(gè)二次,接下來(lái)詳細(xì)介紹quadraticCurveTo方法的使用,感興趣的朋友可以了解下哦
從今天開(kāi)始,我們將開(kāi)始一個(gè)關(guān)于html5 canvas的系列課程。這個(gè)系列是我讀《HTML5 Canvas:Native Interactivity and Animation for the Web》后的總結(jié),有興趣的朋友可以去下載英文原版書(shū)籍閱讀。這本書(shū)通過(guò)介紹canvas游戲開(kāi)發(fā)的方式,向我們展現(xiàn)canvas強(qiáng)大的功能,我覺(jué)得相當(dāng)不錯(cuò),通過(guò)閱讀這本書(shū)我學(xué)到了canvas很多的知識(shí)。其實(shí)canvas本身的api并不多,關(guān)鍵是活學(xué)活用,學(xué)會(huì)對(duì)api的組合使用制作出令人難以置信的效果。而這本書(shū)就是你學(xué)習(xí)canvas最好的選擇,只可惜他暫時(shí)還沒(méi)有中文版,英文不好的朋友只有再等等了。大家都知道,目前并不是所有的瀏覽器中支持html5,就算是支持html5的瀏覽器,也不見(jiàn)得支持html5所有的新特性。所以大家要選擇一款比較新的瀏覽器作為自己的調(diào)試環(huán)境,建議大家使用firefox(開(kāi)發(fā)者的最愛(ài))或者是chrome瀏覽器,我所有的例子都是基于firefox開(kāi)發(fā)的。
html5相關(guān)的基礎(chǔ)知識(shí)這里就不做介紹了,網(wǎng)上有很多關(guān)于html5的教程,自行學(xué)習(xí)吧。學(xué)習(xí)html5需要大家有比較好的javascript的基礎(chǔ),大家可以去湯姆大叔的博客進(jìn)行學(xué)習(xí):http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html。其實(shí)他的這個(gè)系列課程還是有相當(dāng)難度的,50多篇全學(xué)好你應(yīng)該算是js專家了。
現(xiàn)在我們正式開(kāi)始我們的canvas課程,第一個(gè)例子:“hello canvas”。
首先需要在body中添加canvas標(biāo)簽,如下:
復(fù)制代碼 代碼如下:m.dounai2.com
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
canvas中的text部分將會(huì)在瀏覽器不支持canvas對(duì)象時(shí)顯示。
定義了canvas標(biāo)簽,當(dāng)我們需要通過(guò)js對(duì)他進(jìn)行操作的時(shí)候,通過(guò)getElementById就可以實(shí)現(xiàn)。
var theCanvas = document.getElementById("canvasOne");我們現(xiàn)在已經(jīng)習(xí)慣使用jquery來(lái)開(kāi)發(fā)任務(wù),那么使用jquery如何獲取canvas對(duì)象呢?
var canvas = $('#canvasOne').get(0);或var canvas = $('#canvasOne')[0];不知道大家注意到get(0)和[0]沒(méi)有,如果沒(méi)有使用get()方法或者[]下標(biāo)的話,你的js代碼將不能正常對(duì)canvas進(jìn)行操作。因?yàn)?('#canvasOne')獲取到的是一個(gè)jquery對(duì)象,而我們實(shí)際要操作的是一個(gè)html dom對(duì)象。這里有存在一個(gè)jquery對(duì)象轉(zhuǎn)變成dom對(duì)象的問(wèn)題,通過(guò)get()或者下標(biāo)的方式就完成了這個(gè)轉(zhuǎn)換。如果需要把一個(gè)dom對(duì)象轉(zhuǎn)換成jquery對(duì)象,可以使用$()方法實(shí)現(xiàn)。不清楚的朋友只有自己去百度了,這里不做深究。
為了代碼的健壯性,我們需要判斷你的瀏覽器是否支持canvas對(duì)象,可以通過(guò)下面代碼實(shí)現(xiàn)。
復(fù)制代碼 代碼如下:m.dounai2.com
if (!theCanvas || !theCanvas.getContext) {
return;
}
不過(guò)推薦大家使用modernizr.js庫(kù)完成這一工作,這是一個(gè)很通過(guò)的html5 js庫(kù),提供了很多有用的方法
復(fù)制代碼 代碼如下:m.dounai2.com
function canvasSupport () {
return Modernizr.canvas;
}
canvas支持2d渲染,通過(guò)如下代碼實(shí)現(xiàn):
var context = theCanvas.getContext("2d");
下面我們就可以通過(guò)context對(duì)象在canvas上繪制圖像了。
復(fù)制代碼 代碼如下:m.dounai2.com
//設(shè)置區(qū)域顏色
context.fillStyle = "#ffffaa";
//繪制區(qū)域
context.fillRect(0, 0, 500, 300);
//設(shè)置字體
context.font = "20px _sans";
//設(shè)置垂直對(duì)齊方式
context.textBaseline = "top";
//繪制文字
context.fillText ("Hello World!", 195, 80);
//設(shè)置邊框顏色
context.strokeStyle = "#000000";
//繪制邊框
context.strokeRect(5, 5, 490, 290);
下面介紹下圖片的繪制。由于圖片的異步下載的,為了保證你用canvas繪制一個(gè)圖片時(shí),該圖片已經(jīng)下載完畢,我們使用下面的方式:
復(fù)制代碼 代碼如下:m.dounai2.com
var helloWorldImage = new Image();
helloWorldImage.src = "helloworld.gif";
helloWorldImage.onload = function () {
context.drawImage(helloWorldImage, 160, 130);
}
當(dāng)圖片下面完畢時(shí),會(huì)觸發(fā)onload事件,這里再使用context對(duì)象繪制圖片。
大家下載demo看完整代碼,demo下載地址:html5canvas.helloworld.zip
分享:html5 canvas-2.用canvas制作一個(gè)猜字母的小游戲今天我們要用canvas制作一個(gè)猜字母的小游戲,游戲設(shè)計(jì)很簡(jiǎn)單,系統(tǒng)會(huì)隨機(jī)從a-z的26個(gè)字母中選擇一個(gè)保存起來(lái),你鍵盤(pán)輸入一個(gè)字母,系統(tǒng)會(huì)提示你正確字符比你當(dāng)前輸入字母小還是大,直到你輸入正確的字母游戲才結(jié)束,感興趣的朋友可以了解下
相關(guān)HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問(wèn)題開(kāi)發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開(kāi)發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5配合css3實(shí)現(xiàn)帶提示文字的輸入框(擺脫js)
- HTML 5 標(biāo)簽、屬性、事件及瀏覽器兼容性速查表 附打包下載
- html5 Canvas畫(huà)圖教程(1)—畫(huà)圖的基本常識(shí)
- 使用html5+css3來(lái)實(shí)現(xiàn)slider切換效果告別javascript+css
- html5拖曳操作 HTML5實(shí)現(xiàn)網(wǎng)頁(yè)元素的拖放操作
- HTML5 新舊語(yǔ)法標(biāo)記對(duì)我們有什么好處
- 如何讓IE9以下版本(ie6/7/8)認(rèn)識(shí)html5元素
- input元素的url類型和email類型簡(jiǎn)介
- HTML5之SVG 2D入門(mén)4—筆畫(huà)與填充
- html5的新增的標(biāo)簽和廢除的標(biāo)簽簡(jiǎn)要概述
- 相關(guān)鏈接:
- 教程說(shuō)明:
HTML5教程-html5 canvas-1.canvas介紹(hello canvas)。