前言
之前知道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的过程很简单，和电影胶片的原理一样，就是不断的擦除重绘，这样就会形成动画，比如游戏中的人物走动～