canvas是HTML5中新增的一个元素，使用Canvas可以绘制任何你喜欢的图形。先来认识什么是Canvas？
1.在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图像描绘。
2. canvas通过JavaScript来绘制2D图形，它是逐像素进行渲染的。
3.在canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
我们先使用canvas绘制一个常规的图形矩形
用canvas绘制图形需要以下步骤
1.在页面放置canvas元素，指定它的id，width，height属性
2.在body使用onload=“draw（‘canvas’）”，调用javaScript脚本代码绘制矩形的方法（这里是定义的方法名为draw）
3.获取canvas元素。
在javaScript代码通过document.getElementById方法获取canvas元素
4.取得上下文context
图形上下文是一个封装了很多绘图功能的对象。需要使用canvas对象的getContext方法来获取图形上下文。在这里将getContext方法的参数设置为“2d”。因为在draw方法中，我们绘制的是平面图形矩形。
5.设置绘图样式
通过fillStyle属性设定填充图形的样式
通过strokStyle属性设定图形边框的样式
6.指定线宽
通过lineWidth属性指定线宽。
7.绘制矩形
分别使用fillRect方法、strokeRect()方法来填充矩形和绘制矩形边框
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);
这两个方法使用同样的参数。x指矩形起点的横坐标，y指矩形起点的纵坐标，width指矩形的宽度，height指矩形的高度。
运行结果：
