什么是 canvas?
通常情况下，我们可以认为和
但是两者有本质的不同：
是HTML5中用于绘制图形的新标签，标签仅仅是一个图形容器，它通过使用JavaScript脚本语言进行绘制图形。
我们可以通过多种方法使用canvas绘制路径,盒、圆、字符以及添加图像。
创建一个画布
这个单词的本意是“油画布”，所以我们可以通过在浏览器显示区域绘制一个“区域”用以的位置固定和内容呈现。
一个画布在网页中是一个矩形框，通过 元素来绘制。但是，默认情况下的 元素是没有边框和内容。
简单实例如下：
标签通过一个id选择器，在浏览器中绘制了一个200x100大小的矩形。然后我们进一步使用style属性来添加边框。
代码效果如下：
使用 JavaScript 来绘制图像
元素自己是没有任何绘制图形能力的，所以绘制工作必须使用JavaScript完成。
别怂，一起读代码。
首先定义了一个变量 c，让其找到刚刚我们定义的元素；
var c=document.getElementById("myCanvas");然后，创建 context 对象：
var ctx=c.getContext("2d");getContext("2d") 对象是HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000(黑色)。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
代码效果如下：
canvas 的坐标
现在注意上面的JavaScript代码中，最后一行的括号中有一个(0,0)。这就是一个坐标。
是一个二维网格。任何一个绘制的图形都需要制定图形的起始位置和大小。
的左上角坐标为 (0,0)。
fillRec方法中的参数 (0,0,150,75) 表示：从左上角开始 (0,0)，在画布上绘制 150x75的矩形。
canvas 的路径
若是在canvas画布上画一条直线，我们就需要使用以下两种方法：
- moveTo(x,y) 定义线条开始坐标
- lineTo(x,y) 定义线条结束坐标
定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条。
代码效果如下：
接下来，我们来绘制一个圆。
在canvas中绘制圆形, 我们将使用以下方法：
arc(x,y,r,start,stop)；在这个方法中，我们需要了解以下3个概念：
完整的JavaScript代码如下：
通过以上代码，我们就能绘制一个中心点在(95,50)，圆半径为40的一个正圆。
代码效果如下：
canvas 的文本
使用canvas绘制文本，重要的属性和方法如下：
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
我们现在使用 "Arial" 字体在画布上绘制一个高 30px 的文字(实心)，代码如下：
