HTML5通過(guò)調(diào)用canvas對(duì)象的getContext()方法來(lái)獲取繪圖環(huán)境
發(fā)布時(shí)間：2014-06-23 15:29:34 作者：佚名 
我要評(píng)論
我要評(píng)論通過(guò)調(diào)用canvas對(duì)象的getContext()方法來(lái)獲取繪圖環(huán)境，其只需要一個(gè)參數(shù)：繪圖環(huán)境的類型，下面通過(guò)實(shí)例為大家詳細(xì)介紹下
我們用的最基本的繪圖環(huán)境在canvas中繪圖，通過(guò)調(diào)用canvas對(duì)象的getContext()方法來(lái)獲取繪圖環(huán)境。getContext()方法只需要一個(gè)參數(shù)：繪圖環(huán)境的類型。在游戲中，我們使用2D類型的繪圖環(huán)境。
獲取canvas繪圖環(huán)境
<!--<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前。-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset = utf-8">
<title>HTML5</title>
<script type="text/javascript" charset = "utf-8">
//這個(gè)函數(shù)將在頁(yè)面完全加載后調(diào)用
function pageLoaded()
{
//獲取canvas對(duì)象的引用,注意tCanvas名字必須和下面body里面的id相同
var canvas = document.getElementById('tCanvas');
//獲取該canvas的2D繪圖環(huán)境
var context = canvas.getContext('2d');
//繪制代碼將出現(xiàn)在這里
}
</script>
</head>
<body onload="pageLoaded();">
<canvas width = "400" height = "200" id = "tCanvas" style = "border:black 1px solid;">
<!--如果瀏覽器不支持則顯示如下字體-->
提示：你的瀏覽器不支持<canvas>標(biāo)簽
</canvas>
</body>
</html>
獲取canvas繪圖環(huán)境
復(fù)制代碼
代碼如下:<!--<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前。-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset = utf-8">
<title>HTML5</title>
<script type="text/javascript" charset = "utf-8">
//這個(gè)函數(shù)將在頁(yè)面完全加載后調(diào)用
function pageLoaded()
{
//獲取canvas對(duì)象的引用,注意tCanvas名字必須和下面body里面的id相同
var canvas = document.getElementById('tCanvas');
//獲取該canvas的2D繪圖環(huán)境
var context = canvas.getContext('2d');
//繪制代碼將出現(xiàn)在這里
}
</script>
</head>
<body onload="pageLoaded();">
<canvas width = "400" height = "200" id = "tCanvas" style = "border:black 1px solid;">
<!--如果瀏覽器不支持則顯示如下字體-->
提示：你的瀏覽器不支持<canvas>標(biāo)簽
</canvas>
</body>
</html>
相關(guān)文章
html5之Canvas路徑繪圖、坐標(biāo)變換應(yīng)用實(shí)例
本文寫(xiě)一個(gè)html5的時(shí)鐘應(yīng)用程序試手主要設(shè)置了坐標(biāo)變換的平移（translate）和旋轉(zhuǎn)變換（ratate），以及html5 Canvas的路徑繪圖，beginPath，closePath，rect，arc等多的也2012-12-26- 在html5中我覺(jué)得最重要的就是引入了Canvas，使得我們可以在web中繪制各種圖形,而Canvas為基于像素的繪圖。Canvas是一個(gè)相當(dāng)于畫(huà)板的html節(jié)點(diǎn)，我們必須以js操作繪圖2012-12-26
- 這篇文章主要介紹了利用HTML5中的Canvas繪制一張笑臉的教程,使用Canvas進(jìn)行繪圖是HTML5中的基本功能,需要的朋友可以參考下2015-05-07
HTML5 canvas標(biāo)簽實(shí)現(xiàn)刮刮卡效果
這篇文章主要介紹了HTML5 canvas標(biāo)簽實(shí)現(xiàn)刮刮卡效果,本文給出了運(yùn)行效果、HTML代碼和JS代碼,并給出了完整源碼下載,需要的朋友可以參考下2015-04-24- 這篇文章主要介紹了HTML5 Canvas的事件處理介紹,本文講解了Canvas的限制、給Canvas元素綁定事件、isPointInPath方法、循環(huán)重繪和事件冒泡等內(nèi)容,需要的朋友可以參考下2015-04-24
- 這篇文章主要介紹了HTML5 Canvas中繪制橢圓的4種方法,本文講解了參數(shù)方程法、均勻壓縮法、三次貝塞爾曲線法、光柵法等4種方法,需要的朋友可以參考下2015-04-24
一款基于HTML5+Canvas實(shí)現(xiàn)的圖片馬賽克模糊動(dòng)畫(huà)特效源碼
經(jīng)常可以在網(wǎng)上或者電視上看到被馬賽克模糊的圖片或者視頻，今天我們要利用HTML5 Canvas技術(shù)來(lái)實(shí)現(xiàn)圖片的馬賽克模糊效果2015-02-05
HTML5基于Canvas實(shí)現(xiàn)的粒子人物頭像效果源碼
今天我們要再利用HTML5 Canvas實(shí)現(xiàn)一個(gè)粒子效果的人物頭像，你可以任意選擇一張頭像圖片，接下來(lái)該圖片會(huì)被打散成許多粒子2015-02-05
HTML5基于Canvas實(shí)現(xiàn)的折線圖表和柱形圖表源碼
今天要分享的一款HTML5 Canvas圖表應(yīng)用提供了折線圖和柱形圖兩種，這款HTML5圖表在初始化數(shù)據(jù)的時(shí)候有一種漸現(xiàn)的動(dòng)畫(huà)特效，我們可以將這款圖表應(yīng)用在統(tǒng)計(jì)頁(yè)面上2015-01-20HTML5 Canvas繪制圓點(diǎn)虛線實(shí)例
這篇文章主要介紹了HTML5 Canvas繪制圓點(diǎn)虛線實(shí)例,HTML5并未提供畫(huà)虛線的方法,本文是根據(jù)Stack Overflow的方法修改而來(lái),需要的朋友可以參考下2015-01-01
