之前对于canvas的基础知识初步学习了一下，今天试着用canvas画一个矩形，结果出错了，因此这里总结一下几个易错点。
1、创建一个画布（canvas）。
一个画布在网页中是一个矩形框，通过canvas元素来实现。 默认情况下 <canvas> 元素没有边框和内容。
这里需要给画布（canvas）设置宽、高，设置id（后面会用到）。
那么是不是像这样设置呢？
答案是否定的，这里设置宽、高并不是使用style内联属性来设置，当然这样设置结果也能运行出来，可是他会与你想要实现的样式有区别的。
其实正确的设置方式是这样的：
2、利用javascript来绘制图像。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
例如：我要绘制一个矩形。
（1）、找到canvas元素
var Canvas = document.getElementById("myCanvas"); // 必须先等dom元素加载完，也就是id为myCanvas的元素节点应先加载完，否则无法获取
（2）、创建context对象。
var myCanvas = Canvas.getContext("2d");
（3）、设置fillStyle属性，其属性值可以是css颜色、渐变或图案。
myCanvas.fillStyle = "#eee"; // 设置fillStyle属性等于css颜色值，而不是使用括号myCanvas.fillStyle("#eee")这种形式。
（4）、fillRect(x,y,width,height) 方法定义了矩形当前的填充方式
myCanvas.fillRect(10,10,100,100) // 从左上角（10,10）开始，绘制宽100、高100的矩形
注意：
1、画布宽、高的设置方式。
2、找到canvas元素时，应该是canvas元素已经加载完成，否则会获取失败。这里可以将js文件放在head里面，但是需要文档加载完才能获取，也就是需要使用load事件；第二种方法是将js文件放在body底部而无需使用load事件。当然只要是js文件在canvas元素加载完后都行。
3、设置fillStyle属性等于css颜色值，而不是像这样myCanvas.fillStyle("#eee")