HTML5之canvas

　　之前对于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")