入门讲解HTML5的画布功能（2）

前面我们提到了JS代码中绘制的红色长方形，那么我们现在用这些代码再来看看具体是表示什么意思。代码如下

<script type="text/javascript">
var Canvas=document.getElementById("myCanvas"); 
varContext=c.getContext("2d");

Context.fillStyle="#FF0000";

Context.fillRect(0,0,150,75);

 </script>

其实理解能力稍微强一点的小伙伴都应该看出来了，在第一行呢是获取ｃａｎｖａｓ对象，而第二行中呢getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。很显然我们这里用到的是最原始的２Ｄ方法。第三行是给到绘制图形的填充颜色，格式与一般的ＣＳＳ样式没有区别。而第四行则是图形的内部参数，４个参数我们用（ａ，ｂ，ｃ，ｄ）分别来表示。其中ａ，ｂ表示绘制始点坐标，也就是本例中长方形左上角的坐标，而ｃ，ｄ呢自然而然的也就是长方形的长宽了。具体的一些东西能请查询Ｗ３Ｃ的手册，谢谢。

入门讲解HTML5的画布功能（2）

原文：http://www.cnblogs.com/Andylasy/p/4641835.html