运行结果：

这里需要注意的是一个良好的编码规范。因为之前说过了Canvas是基于状态的绘制，只有调用了stroke()和fill()才确定绘制。所以我们要把这两行代码放在最后，其余的状态设置的代码放在它们之前，将状态设置与确定绘制的代码分隔开。增强代码的可读性。

封装绘制方法
大家一定发现了，绘制矩形其实都是这样的四笔，我们每次用这种笨方法画矩形都要画这四笔有多麻烦，如果我们要花10个矩形？100个？1000个？都这样写，代码会臃肿，复用性很低。这里，我们可以使用JavaScript封装这些方法。我们知道，一个矩形可以由它的左上角坐标和其长宽唯一确定。
JavaScript函数
这里我们介绍一下JavaScript函数。如果有基础的同学可以跳过这一大段，直接看后面的。
JavaScript 和 ActionScript 语言的函数声明调用一样，都是编程语言中最简单的。
函数的作用
函数的作用，可以写一次代码，然后反复地重用这个代码。如:我们要完成多组数和的功能。

JavaScript Code复制内容到剪贴板

1. var sum;      
2. sum = 3+2;   
3. alert(sum);   
4.   
5. sum=7+8 ;   
6. alert(sum);    
7.   
8. ....  //不停重复两行代码   
9.   

如果要实现8组数的和，就需要16行代码，实现的越多，代码行也就越多。所以我们可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省去重复输入大量代码的麻烦。
使用函数完成:

JavaScript Code复制内容到剪贴板

1. function add2(a,b){   
2.     sum = a + b;   
3.      alert(sum);   
4. } //  只需写一次就可以   
5.   
6. add2(3,2);   
7. add2(7,8);   
8. ....  //只需调用函数就可以   
9.   

定义函数
如何定义一个函数呢？看看下面的格式：

JavaScript Code复制内容到剪贴板

1. function  函数名( )   
2. {   
3.      函数体;   
4. }   

function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。
函数调用
函数定义好后，是不能自动执行的，需要调用它，直接在需要的位置写函数名。一般有两种方式：

第一种情况：在  

第二种情况：在HTML文件中调用，如通过点击按钮后调用定义好的函数。

这种情况以后用到了再说。
有参数的函数
格式如下：

JavaScript Code复制内容到剪贴板

1. function 函数名(参数1,参数2)   
2. {   
3.      函数代码   
4. }  

注意:参数可以多个，根据需要增减参数个数。参数之间用(逗号，）隔开。
按照这个格式，函数实现任意两个数的和应该写成：

JavaScript Code复制内容到剪贴板

1. function add2(x,y)   
2. {   
3.    sum = x + y;   
4.    document.write(sum);   
5. }  

x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。
例如，add2(3，4)会求3+4的和，add2(60,20)则会求出60和20的和。
返回值函数

JavaScript Code复制内容到剪贴板

1. function add2(x,y)   
2. {   
3.    sum = x + y;   
4.    return sum; //返回函数值,return后面的值叫做返回值。   
5. }  

这里的return和其他语言中的一样，但是在JS或者AS等弱类型语言中，返回值类型是不需要写到函数声明里的。

至此，我们把JavaScript函数也顺便系统的说了一下。下面回到正题~
我们也可以封装一下我们的矩形，代码如下：

JavaScript Code复制内容到剪贴板

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.   
7.   
8. "canvas-warp">   
9.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
11.