鍍金池/ 教程/ HTML/ HTML5 畫布
HTML5 Web 存儲(chǔ)
HTML5 Web SQL 數(shù)據(jù)庫
HTML5 字符編碼
HTML5 URL 編碼
HTML5 Modernizr
HTML5 快速指南
HTML5 畫布
HTML5 語法
HTML5 顏色代碼生成器
HTML5 音頻和視頻
HTML5 微數(shù)據(jù)
HTML5 標(biāo)簽參考
HTML5 在線編輯器
HTML5 表單 2.0
HTML5 概述
HTML5 SVG 教程
HTML5 驗(yàn)證
有用的 HTML5 資源
HTML5 字體參考
HTML5 屬性
HTML5 新標(biāo)簽（元素）
HTML5 地理定位
HTML5 拖放
HTML5 字符實(shí)體參考
HTML5 Web Workers
HTML5 過時(shí)標(biāo)簽和屬性
HTML5 顏色名稱
HTML5 WebSockets 教程
HTML5 服務(wù)器推送事件
HTML5 事件
HTML5 MathML 教程

HTML5 畫布

HTML5 <canvas> 元素為我們使用 JavaScript 繪制圖形提供了一種簡單而又強(qiáng)大的方式。它可以用來繪制圖表，制作攝影作品或者做一些簡單（以及復(fù)雜）的動(dòng)畫。

這里有一個(gè)簡單的 <canvas> 元素，除了所有核心的 HTML5 屬性，比如 id，name 和 class 等等之外，它只有兩個(gè)特定的屬性 width 和 height。

<canvas id="mycanvas" width="100" height="100"></canvas>

使用 _getElementById()__ 方法很容易找到這個(gè) <canvas> 元素，如下所示：

var canvas  = document.getElementById("mycanvas");

我們來看一個(gè)在 HTML5 文檔中使用 <canvas> 元素的簡單示例。

<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{
   border:1px solid red;
}
</style>
</head>
<body>
   <canvas id="mycanvas" width="100" height="100"></canvas>
</body>
</html>

便于學(xué)習(xí)上述概念 - 請(qǐng)使用最新版的 Safari 或者 Opera 進(jìn)行在線練習(xí)。

渲染上下文

<canvas> 初始為空，要顯示某物，腳本首先需要訪問渲染上下文，然后再上面繪圖。

canvas 元素有一個(gè)叫做 getContext 的 DOM 方法，用于獲得渲染上下文和它的繪圖功能。這個(gè)函數(shù)接受一個(gè)參數(shù)，2d 上下文類型。

下面的代碼就是訪問需要的上下文以及檢測瀏覽器是否支持 <canvas> 元素：

var canvas  = document.getElementById("mycanvas");
if (canvas.getContext){   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   // canvas-unsupported code here 
}

瀏覽器支持

最新版的 FireFox，Safari，Chrome 和 Opera 都支持 HTML5 Canvas，但是 IE8 不支持原生 Canvas。

我們可以使用 ExplorerCanvas 讓 IE 瀏覽器支持 Canvas。只需按照如下方式引入這個(gè)腳本即可：

<!--[if IE]><script src="excanvas.js"></script><![endif]-->

HTML5 Canvas 示例

本教程涵蓋下列 HTML5 <canvas> 元素相關(guān)的示例。

示例 描述
繪制矩形

學(xué)習(xí)如何使用 HTML5 <canvas> 元素繪制矩形。

繪制路徑

學(xué)習(xí)如何在 HTML5 <canvas> 元素中使用路徑創(chuàng)建形狀。

繪制線條

學(xué)習(xí)如何使用 HTML5 <canvas> 元素繪制線條。

繪制貝塞爾曲線

學(xué)習(xí)如何使用 HTML5 <canvas> 元素繪制貝塞爾曲線。、

繪制二次曲線

學(xué)習(xí)如何使用 HTML5 <canvas> 元素繪制二次曲線。

使用圖像

學(xué)習(xí)如何在 HTML5 <canvas> 元素中使用圖像。

創(chuàng)建漸變

學(xué)習(xí)如何使用 HTML5 <canvas> 元素創(chuàng)建漸變。

樣式和顏色

學(xué)習(xí)如何使用 HTML5 <canvas> 元素應(yīng)用樣式和顏色。

文本和字體

學(xué)習(xí)如何使用不同的字體和尺寸繪制神奇的文字。

圖案和投影

學(xué)習(xí)如何繪制不同的圖案和陰影。

畫布狀態(tài)

學(xué)習(xí)如何在畫布上做復(fù)雜繪圖時(shí)保存和恢復(fù)畫布狀態(tài)。

畫布平移

這個(gè)方法用于移動(dòng)畫布和它原點(diǎn)到網(wǎng)格上的不同點(diǎn)。

畫布旋轉(zhuǎn)

這個(gè)方法用于圍繞當(dāng)前原點(diǎn)旋轉(zhuǎn)畫布。

畫布縮放

這個(gè)方法用于增大或者減小畫布網(wǎng)格中的單位。

畫布變換

這個(gè)方法允許我們直接修改變換矩陣。

畫布合成

這個(gè)方法用于從畫布上屏蔽某些區(qū)域或者清除某一部分。

Canvas 動(dòng)畫

學(xué)習(xí)如何使用 HTML5 畫布和 JavaScript 創(chuàng)建基本的動(dòng)畫。