canvas（01基礎用法）

片

canvas 標籤只有兩個屬性—— width和height。這些都是可選的，並且同樣利用 dom properties 來設定。

當沒有設定寬度和高度的時候，canvas會初始化寬度為300畫素和高度為150畫素。該元素可以使用css來定義大小，但在繪製時影象會伸縮以適應它的框架尺寸：如果css的尺寸與初始畫布的比例不一致，它會出現扭曲。

canvas 相比於img標籤很容易展示替代的內容，以為canvas的不同瀏覽器支援率不是很高。利用下面的方法，不支援canvas的瀏覽器將會忽略容器，渲染其中的內容。而支援的瀏覽器將會直接渲染標籤而忽略其中的文字。

current stock price: $3.15 +0.15

canvas標籤需要閉合。如果標籤不結束下文的內容將會被認為是替代的內容從而不進行渲染。

canvas起初是空白的。為了展示，首先指令碼需要找到渲染上下文，然後在它的上面繪製。

var canvas = document.getelementbyid('tutorial');
var ctx = canvas.getcontext('2d');

**的第一行通過使用 document.getelementbyid() 方法來為元素得到dom物件。一旦有了元素物件，你可以通過使用它的getcontext() 方法來訪問繪畫上下文。

檢查canvas dom元素是否有獲取上下文這個api來檢測瀏覽器是否支援canvas

var canvas = document.getelementbyid('tutorial');
if (canvas.getcontext) else

一開始，讓我們來看個簡單的例子，我們繪製了兩個有趣的長方形，其中的乙個有著alpha透明度。我們將在接下來的例子裡深入探索一下這是如何工作的。