Canvas 學習筆記（一）

一直沒有系統的去學習一下canvas，都是在用到的時候一邊google一邊使用，最近工做上的事情告一段落，就決定跟着MDN 學習一下Canvas。

在學習以前，首先了解一下canvas的背景知識。如下內容引用自 MDN：

<canvas> 最先由Apple引入WebKit，用於Mac OS X 的 Dashboard，後來又在Safari和Google Chrome被實現。 基於Gecko 1.8的瀏覽器,好比 Firefox 1.5， 一樣支持這個元素。<canvas> 元素是WhatWG Web applications 1.0規範的一部分,也包含於HTML 5中。

canvas ，中文翻譯爲畫布，canvas 的出現爲Web開發者帶了新一輪的 高潮，利用canvas 能夠實現出更多好玩的、酷炫的效果。之前依賴flash的效果如今也能夠利用canvas來實現了。

canvas 標籤 和 其餘 HTML 標籤 相似，也擁有着許多基本的屬性和表現行爲。好比id、class及 css的規則。canvas標籤同時支持 屬性width、height 和 css 規則中的width、height。 默認狀況下，canvas 的尺寸爲300px * 150px。 canvas 元素可使用CSS來定義大小，但在繪製時圖像會伸縮以適應它的框架尺寸：即若是CSS的尺寸與初始畫布的比例不一致，它會出現扭曲。

若是你繪製出來的圖像是扭曲的, 嘗試在<canvas>的屬性中明確規定寬和高，而不是使用CSS。

canvas標籤自己不提供繪製功能，因此別期望直接操做canvas的DOM對象來實現酷炫的效果。 若是想要去繪製圖形制做出各類效果出來，那咱們須要操做的是canvas 的 渲染上下文對象。

canvas給個人感受更像是一張白紙，渲染上下文 是咱們找到的畫師。canvas 向 畫師提供了做畫的地方，而畫師（渲染上下文） 則將美麗的圖畫繪製在紙張（canvas）上。

canvas 提供了一個方法 getContext 來獲取它的 渲染上下文及其的繪製能力。getContext 接受一個參數，用來指示咱們但願獲得一個什麼樣的畫師。經常使用的有兩種2d 和 webgl 。 2d 指示咱們但願獲得一個擁有平面作圖能力的畫師，而webgl則指示咱們但願獲得一個可以繪製3d圖形的畫師。

var canvas = document.getElementById('canvas'); // 獲取canvas 節點
var ctx = canvas.getContext('2d'); // 獲取canvas節點的渲染上下文

當咱們獲取到渲染上下文以後，就能夠作愛作的事了！ 咱們所作的一切的操做都創建在渲染上下文 對象上，若是沒有這個渲染上下文，那麼咱們想要繪製哪怕一個簡單的矩形都無從談起。

接下來，咱們看一個簡單的例子：繪製一個簡單的紅色矩形,矩形的左上角位於(0,0),寬是150，高是100。

http://codepen.io/YoRolling/p...

未完待續……