HTML5邊玩邊學(xué)（1）畫布實(shí)現(xiàn)方法

2020-03-24 18:49:43

字體：大中小

供稿：網(wǎng)友

一、 canvas 標(biāo)簽

Html5 引入了一個(gè)新的 canvas 標(biāo)簽，這個(gè)標(biāo)簽所代表的區(qū)域就好象一塊畫布，你的所有圖形繪制最后都要在這塊畫布上呈現(xiàn)。有了這個(gè)標(biāo)簽，瀏覽器的圖形表現(xiàn)力被極大的提升，F(xiàn)lash 和 SilverLight 有沒有感到威脅呢?

新聞鏈接：Google聲稱Chrome7瀏覽器將提速60倍

canvas 標(biāo)簽的用法非常簡單，如下：

復(fù)制代碼代碼如下:
canvas id="tutorial" width="150" height="150"
你的瀏覽器不支持 Canvas 標(biāo)簽
/canvas

canvas 標(biāo)簽和普通的 HTML 標(biāo)簽沒有多大的區(qū)別，你可以設(shè)置它的寬度和高度，可以通過 CSS 設(shè)置它的背景色、邊框樣式等等。

你可以在這里找到關(guān)于 canvas 標(biāo)簽的更多內(nèi)容。

標(biāo)簽中間的內(nèi)容是替換內(nèi)容，如果用戶的瀏覽器不支持 canvas 標(biāo)簽，這段內(nèi)容就會(huì)被顯示出來；如果用戶的瀏覽器支持 canvas 標(biāo)簽，則這段內(nèi)容將被忽略。

上面的 canvas 代碼顯示效果如下：

你的瀏覽器不支持 Canvas 標(biāo)簽

如果你用的是IE瀏覽器，可能只能看到一個(gè)提示；如果你用的是谷歌瀏覽器或者火狐瀏覽器，你就可以看到一個(gè)紅色的方塊區(qū)域。
二、渲染上下文 Rendering Context
其實(shí)光有 canvas 標(biāo)簽我們并不能作任何事情，玩過 Windows 編程的同學(xué)都知道，在 Windows 里面繪圖先要得到一個(gè)設(shè)備上下文 DC ,在 canvas 標(biāo)簽上繪圖也需要先得到一個(gè)渲染上下文，我們的圖形并不是直接畫到屏幕上的，而是先畫到上下文(Context)上，然后再刷新到屏幕上面的。
題外話：為什么要整出一個(gè) 上下文這么復(fù)雜的概念呢？因?yàn)橛辛松舷挛膶?duì)象，我們就可以讓各種不同的圖形設(shè)備在我們眼里面看起都是一個(gè)樣，我們只需要專注于繪圖，其他的工作就讓操作系統(tǒng)和瀏覽器去操心吧，說白了就是把各式各樣的具體變成統(tǒng)一的抽象，從而減輕我們的負(fù)擔(dān)。
獲取上下文非常簡單，只需要如下兩行代碼：
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
首先獲取 canvas 對(duì)象，然后調(diào)用 canvas 對(duì)象的 getContext 方法，這個(gè)方法目前只能傳入?yún)?shù) 2d ，不久的將來他可能會(huì)支持參數(shù) 3d ，你一定明白那意味著什么，讓我們期待吧。
getContext 方法返回一個(gè) CanvasRenderingContext2D 對(duì)象，即渲染上下文對(duì)象，你可以在這里找到關(guān)于它的更多內(nèi)容，都是一些繪圖方法。

三、瀏覽器支持
除了在那些不支持的瀏覽器上顯示替用內(nèi)容之外，我們還可以通過腳本的方式來檢查瀏覽器是否支持 canvas ，方法很簡單，判斷 getContext 函數(shù)是否存在即可，代碼如下：

復(fù)制代碼代碼如下:
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
alert("支持 canvas 標(biāo)簽");
} else {
alert("不支持 canvas 標(biāo)簽");
}

四、一個(gè)小例子
下面將用 HTML5 的繪圖功能演示一個(gè)上下移動(dòng)的線條的例子，具體的代碼將在后續(xù)內(nèi)容中給出

提示：您可以先修改部分代碼再運(yùn)行
你的瀏覽器不支持 canvas 標(biāo)簽，請(qǐng)使用 Chrome 瀏覽器或者 FireFox 瀏覽器html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：html5定位獲取當(dāng)前位置并在百度地圖上顯示

下一篇：HTML5 Canvas 繪圖——使用 Canvas 繪制圖形圖文教程