一直没有系统的去学习一下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。

未完待续……

内容来源：https://segmentfault.com/a/1190000007506638