canvas 基础用法

Canvas简介

Canvas元素是HTML5的一部分，允許指令碼語言動態渲染點陣圖像。Canvas是由HTML代碼配合高度和寬度屬性而定義出的可繪製區域。JavaScript代碼可以訪問該區域，類似於其他通用的二維API，通過一套完整的繪圖函數來動態生成圖形。一些可能的用途，包括使用Canvas構造圖形，動畫，遊戲和圖片。[来自维基百科)]
Canvas的浏览器支持情况：

Internet Explorer	Firefox	Safari	Chrome	Opera	iOS Safari	Opera Mobile	Android Browser
6.0	5.1	3.2	12.0	10.6		10.0	2.1
7.0	6.2	4.0	13.0	11.0	3.2	11.0	2.2
8.0	7.1	5.0	14.0	11.1	4.0	11.1	2.3,3.0
9.0	8.0	5.1	15.0	11.5	4.2-4.3	11.5	4.0

对于不支持Canvas标签的浏览器，可以在其标签增加替换内容，比如一句话，或者一张图片。</canvas>标签不能省略，如果结束标签不存在，<canvas>标签后的其余部分都会被认为是替换内容，导致其余部分无法正常显示。

<canvas id="canvas-1" width="200" height="200">
  <p>浏览器不支持canvas标签</p>
</canvas>

同时也可以依靠脚本来判定浏览器是否支持 <canvas>标签。

var canvas1 = document.getElementById('canvas-1');
if (canvas1.getContext){
  var ctx1 = canvas1.getContext('2d');
  ...
} else {
  ...
}

Canvas属性

canvas标签只有两个属性：width和height。渲染canvas时，如果不设置固定的宽高，canvas会默认设置宽度为300px，高度为150px。虽然也可以使用css定义canvas的宽高，但是在绘制图形时可能会存在图形拉伸。比如你绘制的是一个正方形，由于通过css设置了宽高，但css的尺寸跟canvas初始画布的比例不一致，就会出现形状拉伸现象。下面用一个例子来看一下。

See the Pen rdeRjo by LCINA (@LCINA) on CodePen.

上面的例子包括了四种情况，分别是
1.不设置宽高[默认300x150]
2.设置canvas宽高
3.设置canvas初始化宽高+css设置同比例宽高
4.默认canvas宽高300x150+css设置宽高[200x200]
前两种情况没有什么特别，后两种情况，唯一的区别就是两者宽高比例是否一致，可以发现第三种情况canvas宽高和css设置的宽高比例一致，所以绘制的图形没有出现变形扭曲现象。而最后一种情况，默认canvas的宽高为300x150，与设置的css宽高200x200不一致，所以画布绘制的图形出现了变形扭曲的现象。综上，如果要用css来设置canvas的尺寸，需要跟canvas初始尺寸比例保持一致。

渲染上下文

<canvas>标签创建了一块固定大小的画布，公开了一个或多个渲染上下文，可以用来绘制和处理要展示的内容。如果要画布上绘制内容，就必须拿到canvas上下文，可以根据拿到的上下文，绘制各种图形等。

var canvas1 = document.getElementById('canvas-1');
var ctx1 = canvas1.getContext('2d');

获取到ctx1这个上下文后，就可以调用提供的api绘制图形，如fillRect等。
本文主要介绍了canvas比较基础的用法，下一章会介绍如何通过canvas创建的上下文绘制各种图形。

参考资料：
Canvas的基本用法