一直沒有系統的去學習一下canvas，都是在用到的時候一邊google一邊使用，最近工作上的事情告一段落，就決定跟著mdn學習一下canvas。
在學習之前，首先了解一下canvas的背景知識。以下內容引用自 mdn：
canvas，中文翻譯為畫布，canvas的出現為web開發者帶了新一輪的高潮，利用canvas可以實現出更多好玩的、酷炫的效果。以前依賴flash的效果現在也可以利用canvas來實現了。
canvas標籤 和 其他html標籤 類似，也擁有著許多基本的屬性和表現行為。比如id、class及css的規則。canvas標籤同時支援 屬性width、height和css規則中的width、height。 預設情況下，canvas的尺寸為300px * 150px。canvas元素可以使用css來定義大小，但在繪製時影象會伸縮以適應它的框架尺寸：即如果css的尺寸與初始畫布的比例不一致，它會出現扭曲。
如果你繪製出來的影象是扭曲的, 嘗試在的屬性中明確規定寬和高，而不是使用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。
未完待續……
canvas學習筆記一
html5新增的canvas標籤可用來繪圖。今天開始學習了一點繪製基礎。一 繪製三角形 1 canvas繪圖是基於狀態的繪圖，也就是說應該先設定繪圖狀態，再呼叫函式進行繪製 2 座標系 canvas的左上角為原點，向右為x軸正方向，向下為y軸正方向 繪圖步驟 1 定義標籤 當前瀏覽器不支援canva...
canvas學習筆記一
為了研究pixi庫，就順帶從頭到位學習下canvas吧 var webgl function catch e getcontext方法指定引數2d，表示該canvas物件用於生成2d圖案 即平面圖案 如果引數是3d，就表示用於生成3d影象 即立體圖案 這部分實際上單獨叫做webgl api 繪製路徑...
canvas學習筆記（一）
canvas是html5的新標籤，一般稱為 畫布 通過js 在這個 畫布 上製作各種各樣的圖形 絢麗的效果等等。現在開始一步一步了解canvas 首先，需要在html中新增乙個,一般來說，我們可以在canvas標籤內新增其他元素，對於不相容canvas的瀏覽器，就會把canvas標籤內當元素呈現出來...