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...

未完待续……