前言
之前知道canvas這個東西，沒有深入學習過，後來心血來潮買了本《html5 canvas核心技術》，一直深壓櫃底，從未翻看過（ps. 作爲多年的碼農，不加班就不錯了，哪還有時間看書～），直到最近，閒來無事，有時間來看看這本書。在之前的工作過程中，也寫過canvas的東西，只是一些簡單的東西。拿不出手啊！！！
什麼是canvas？
canvas是html5元素中的一個，只是一個簡單的標籤，和p，span等標籤一樣，就是一個標籤，但是通過這個標籤，我們可以做很多神奇的事情，比如：繪製一張圖畫，製作一個寫字板，甚至可以做小遊戲等。
canvas的準備工作
一、你要有一定的思維邏輯，並且要腦洞大開，爲什麼呢？因爲一切代碼的實現都基於你要有想法才能進行實現。沒有想法我們能做什麼呢？那什麼都做不了，沒有想法就沒有互聯網的到來，所以說，有想法很重要。
二、我們要做個什麼？一般人正常的想法都是：canvas這麼厲害，能做個小遊戲，那我做個小遊戲吧。直接挑最難的上手，這種是錯誤的。學習是個由淺入深的過程，我們先做兩個比較簡單的東西，來了解canvas以後在做一些難的東西，這樣你在遇到問題的時候可以很快的找到問題原因，不至於一臉懵逼。
三、canvas標籤只是個容器，在這個容器裏面我們可以做很多事情，但是這些事情的實現需要javascript來做支持，所以需要你有紮實的javascript基礎，這樣你才能玩轉canvas，如果沒有一定的基礎的話，那麼，我建議你先好好學習一下javascript的知識（ps&衷心建議：尤其是鼠標和鍵盤的操作）
基礎入門
1、API文檔必不可少，這東西只要做canvas開發少不了經常查閱。
w3school： http://www.w3school.com.cn/tags/html_ref_canvas.asp
MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
2、helloword的實現，學習語言第一個需要實現的（ps.雖然canvas不是語言，咱們也先實現一下）
1）首先頁面上創建canvas元素
<canvas id="canvas" width="300" height="200"></canvas>
2）獲取canvas及繪製hello word
// 1.獲取canvas
var canvas = document.getElementById('canvas');
// 2.獲取繪圖環境變量
var context = canvas.getContext('2d');
// 3.設置字體屬性
context.font = '38px Arial';
// 4.在canvas上進行繪製
context.fillText('hello word!', 0, 100);
// 爲了效果，3秒後重繪
setTimeout(function(){
// 5.清除畫布
context.clearRect(0,0,300,200);
// 6.繪製新的文字
context.fillText('hello canvas!', 0, 100);
}, 3000)
顯示效果：
最後總結
這篇博客沒有什麼太有技術性的東西，主要是讓大家理解canvas的繪製過程以及前期的準備工作，理解原理上手就會容易和快速，canvas的過程很簡單，和電影膠片的原理一樣，就是不斷的擦除重繪，這樣就會形成動畫，比如遊戲中的人物走動～