Canvas 1 起手

学习来源:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

元素

<canvas width='150px' height='200px'></canvas>

• 默認的width=300px，height=150px，完全透明
• 值得注意的事情是，如果 CSS 的尺寸與初始畫布比例不一致，就會扭曲，因此最佳的辦法是在 canvas 中明確規定寬和高。

替換內容

• 和傳統 img 標籤不同的地方在於，canvas可以想video，audio等一樣，可以使用替代內容，也就是當遇到無法渲染 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" alt=""/>
</canvas>

渲染上下文

• 預設的canvas是一個固定大小的畫布，它公開一個或多個渲染上下文，其可以用來繪製和處理展示的內容，在此注意力放在2D的渲染上下文。

• 初始是空白改的，通過 getContext() 的方法來獲得渲染上下文和它的繪畫功能。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

• 這段代碼的內容，就是抓取到 canvas 的DOM對象，然後通過getContext(‘2d’)的方法來訪問繪畫的上下文。同時我們可以通過檢查 canvas.getContext 是否爲 undefined 來判斷瀏覽器是否支持。

• 對於2D圖像而言，可以使用 CanvasRenderingContext2D