<canvas>看起來很像<img>，唯一不同就是它不含 src 和 alt 屬性。它只有兩個屬性，width 和 height，兩個都是可選的，並且都可以 DOM 或者 CSS 來設定。如果不指定width 和 height，預設的是寬300像素，高150像素。雖然可以通過 CSS 來調整canvas的大小，但渲染映像會縮放來適應布局的（如果你發現渲染結果看上去變形了，不必一味依賴CSS，可以嘗試顯式指定canvas的width 和 height 屬性值）。
id 屬性不是<canvas>專享的，就像標準的HTLM標籤一樣，任何一個HTML元素都可以指定其 id 值。一般，為元素指定 id是個不錯的主意，這樣使得在指令碼中應用更加方便。
<canvas>元素可以像普通圖片一樣指定其樣式（邊距，邊框，背景等等）。然而這些樣式並不會對canvas實際產生的映像產生什麼影響。下面我們會看到如何應用樣式。如果不指定樣式，canvas預設是全透明的。
因為 <canvas> 相對較新，有些瀏覽器並沒實現，如Firefox 1.0 和 Internet Explorer，所以我們需要為那些不支援canvas的瀏覽器提供替用顯示內容。
我們只需要直接在canvas元素插入入替用內容即可。不支援canvas的瀏覽器會忽略canvas元素而直接渲染替用內容，而支援的瀏覽器則會正常地渲染canvas。例如，我們可以把一些文字或圖片填入canvas內，作為替用內容：
<canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15</canvas><canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150"/></canvas>
渲染上下文（Rendering Context）
<canvas> 建立的固定尺寸的繪圖畫面開放了一個或多個渲染上下文（rendering context），我們可以通過它們來控制要顯示的內容。我們專註於2D 渲染上，這也是目前唯一的選擇，可能在將來會添加基於OpenGL ES 的 3D 上下文。<canvas> 初始化是空白的，要在上面用指令碼畫圖首先需要其渲染上下文（rendering context），它可以通過 canvas 元素對象的 getContext 方法來擷取，同時得到的還有一些畫圖用的函數。getContext() 接受一個用於描述其類型的值作為參數。上面第一行通過 getElementById 方法取得 canvas 對象的 DOM 節點。然後通過其 getContext 方法取得其畫圖操作上下文。
除了在那些不支援 的瀏覽器上顯示替用內容，還可以通過指令碼的方式來檢查瀏覽器是否支援 canvas 。方法很簡單，判斷getContext 是否存在即可。
var canvas = document.getElementById('tutorial');if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here} else { // canvas-unsupported code here}
一個簡單的例子
作為開始，來一個簡單的吧——繪製兩個交錯的矩形，其中一個是有alpha透明效果。我們會在後面的樣本中詳細的讓你瞭解它是如何運作的。
<html>
<head>
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
