HTML5 <canvas> 元素為我們使用 JavaScript 繪制圖形提供了一種簡單而又強大的方式。它可以用來繪制圖表，制作攝影作品或者做一些簡單（以及復雜）的動畫。
這里有一個簡單的 <canvas> 元素，除了所有核心的 HTML5 屬性，比如 id，name 和 class 等等之外，它只有兩個特定的屬性 width 和 height。
<canvas id="mycanvas" width="100" height="100"></canvas>使用 _getElementById()__ 方法很容易找到這個 <canvas> 元素，如下所示：
var canvas = document.getElementById("mycanvas");我們來看一個在 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>便于學習上述概念 - 請使用最新版的 Safari 或者 Opera 進行在線練習。
<canvas> 初始為空，要顯示某物，腳本首先需要訪問渲染上下文，然后再上面繪圖。
canvas 元素有一個叫做 getContext 的 DOM 方法，用于獲得渲染上下文和它的繪圖功能。這個函數(shù)接受一個參數(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。只需按照如下方式引入這個腳本即可：
<!--[if IE]><script src="excanvas.js"></script><![endif]-->本教程涵蓋下列 HTML5 <canvas> 元素相關的示例。
| 示例 | 描述 |
|---|---|
| 繪制矩形 |
學習如何使用 HTML5 <canvas> 元素繪制矩形。 |
| 繪制路徑 |
學習如何在 HTML5 <canvas> 元素中使用路徑創(chuàng)建形狀。 |
| 繪制線條 |
學習如何使用 HTML5 <canvas> 元素繪制線條。 |
| 繪制貝塞爾曲線 |
學習如何使用 HTML5 <canvas> 元素繪制貝塞爾曲線。、 |
| 繪制二次曲線 |
學習如何使用 HTML5 <canvas> 元素繪制二次曲線。 |
| 使用圖像 |
學習如何在 HTML5 <canvas> 元素中使用圖像。 |
| 創(chuàng)建漸變 |
學習如何使用 HTML5 <canvas> 元素創(chuàng)建漸變。 |
| 樣式和顏色 |
學習如何使用 HTML5 <canvas> 元素應用樣式和顏色。 |
| 文本和字體 |
學習如何使用不同的字體和尺寸繪制神奇的文字。 |
| 圖案和投影 |
學習如何繪制不同的圖案和陰影。 |
| 畫布狀態(tài) |
學習如何在畫布上做復雜繪圖時保存和恢復畫布狀態(tài)。 |
| 畫布平移 |
這個方法用于移動畫布和它原點到網格上的不同點。 |
| 畫布旋轉 |
這個方法用于圍繞當前原點旋轉畫布。 |
| 畫布縮放 |
這個方法用于增大或者減小畫布網格中的單位。 |
| 畫布變換 |
這個方法允許我們直接修改變換矩陣。 |
| 畫布合成 |
這個方法用于從畫布上屏蔽某些區(qū)域或者清除某一部分。 |
| Canvas 動畫 |
學習如何使用 HTML5 畫布和 JavaScript 創(chuàng)建基本的動畫。 |
掃碼關注鍍金池微信號
手機訂課，優(yōu)惠多多