社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > HTML5邊玩邊學（1）畫布實作方法 _html5教學技巧

HTML5邊玩邊學（1）畫布實作方法 _html5教學技巧

WBOY
發布： 2016-05-16 15:51:20
原創
1553 人瀏覽過
一、標籤

Html5 引入了一個新的 標籤，這個標籤所代表的區域就好像一塊畫布，你的所有圖形繪製最後都要在這塊畫布上呈現。有了這個標籤，瀏覽器的圖形表現力被極大的提升，Flash 和SilverLight 有沒有感到威脅呢?

新聞連結：Google聲稱Chrome7瀏覽器將提速60倍

標籤的用法非常簡單，如下：

複製代碼
代碼如下:


你的瀏覽器不支援Canvas 標籤


標籤和普通的HTML 標籤沒有多大的區別，你可以設定它的寬度和高度，可以透過CSS 設定它的背景色、邊框樣式等等。

你可以在 這裡 找到更多關於 標籤的內容。

標籤中間的內容是替換內容，如果使用者的瀏覽器不支援 標籤，這段內容就會被顯示出來；如果使用者的瀏覽器支援 標籤，則這段內容將被忽略。

上面的 程式碼顯示效果如下：

你的瀏覽器不支援Canvas 標籤

如果你用的是IE瀏覽器，可能只能看到一個提示；如果你用的是Google瀏覽器或火狐瀏覽器，你就可以看到一個紅色的方塊區域。
二、渲染上下文Rendering Context
其實光有 標籤我們並不能作任何事情，玩過Windows 程式設計的同學都知道，在Windows 裡面繪圖先要得到一個設備上下文DC ,在 標籤上繪圖也需要先得到一個渲染上下文，我們的圖形並不是直接畫到螢幕上的，而是先畫到上下文(Context)上，然後再刷新到螢幕上面的。
題外話： 為什麼要整出一個「上下文」這麼複雜的概念呢？因為有了上下文對象，我們就可以讓各種不同的圖形設備在我們眼裡面看起都是一個樣，我們只需要專注於繪圖，其他的工作就讓操作系統和瀏覽器去操心吧，說白了就是把各式各樣的具體變成統一的抽象，從而減輕我們的負擔。
取得上下文非常簡單，只需要如下兩行程式碼：
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
先取得canvas 對象，然後呼叫canvas 物件的getContext 方法，這個方法目前只能傳入參數"2d"，不久的將來他可能會支援參數"3d"，你一定明白那意味著什麼，讓我們期待吧。
getContext 方法返回一個 CanvasRenderingContext2D 物件 ，即渲染上下文對象，你可以在 這裡 找到關於它的更多內容，都是一些繪圖方法。

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

複製程式碼
程式碼如下:

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
alert("支援 標籤");
} else {
alert("不支援 標籤");
}


四、一个小例子
下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子， 具体的代码将在后续内容中给出



提示：您可以先修改部分代码再运行

你的浏览器不支持 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
相關標籤：
html5
來源：php.cn
上一篇：IE支援HTML5的解決方法_html5教程技巧 下一篇：html5 學習簡單的拾色器 _html5教學技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
來自於 2024-04-02 11:47:56
0
1
275
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板