# Ch5 绘制矩形

## 使用closePath()闭合图形

<!DOCTYPE html><htmllang="zh"><head><metacharset="UTF-8"><title>绘制矩形</title></head><body><divid="canvas-warp"><canvasid="canvas"style="border:1px solid #aaaaaa; display: block; margin: 50px auto;">        你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas></div><script>    window.onload =function(){var canvas = document.getElementById("canvas");        canvas.width =800;        canvas.height =600;var context = canvas.getContext("2d");        context.beginPath();        context.moveTo(150,50);        context.lineTo(650,50);        context.lineTo(650,550);        context.lineTo(150,550);        context.lineTo(150,50);//绘制最后一笔使图像闭合        context.lineWidth =5;        context.strokeStyle ="black";        context.stroke();}</script></body></html>

<!DOCTYPE html><htmllang="zh"><head><metacharset="UTF-8"><title>绘制矩形</title></head><body><divid="canvas-warp"><canvasid="canvas"style="border:1px solid #aaaaaa; display: block; margin: 50px auto;">        你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas></div><script>    window.onload =function(){var canvas = document.getElementById("canvas");        canvas.width =800;        canvas.height =600;var context = canvas.getContext("2d");        context.beginPath();        context.moveTo(150,50);        context.lineTo(650,50);        context.lineTo(650,550);        context.lineTo(150,550);        context.lineTo(150,50);//最后一笔可以不画        context.closePath();//使用closePath()闭合图形        context.lineWidth =5;        context.strokeStyle ="black";        context.stroke();}</script></body></html>

## 给矩形上色

<!DOCTYPE html><htmllang="zh"><head><metacharset="UTF-8"><title>绘制矩形</title></head><body><divid="canvas-warp"><canvasid="canvas"style="border:1px solid #aaaaaa; display: block; margin: 50px auto;">        你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas></div><script>    window.onload =function(){var canvas = document.getElementById("canvas");        canvas.width =800;        canvas.height =600;var context = canvas.getContext("2d");        context.beginPath();        context.moveTo(150,50);        context.lineTo(650,50);        context.lineTo(650,550);        context.lineTo(150,550);        context.lineTo(150,50);//最后一笔可以不画        context.closePath();//使用closePath()闭合图形        context.fillStyle ="yellow";//选择油漆桶的颜色        context.lineWidth =5;        context.strokeStyle ="black";        context.fill();//确定填充        context.stroke();}</script></body></html>

## 封装绘制方法

### JavaScript函数

JavaScript 和 ActionScript 语言的函数声明调用一样，都是编程语言中最简单的。

#### 函数的作用

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

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

#### 定义函数

function函数名(){函数体;}

function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。

#### 函数调用

• 第一种情况：在<script>标签内调用。
<script>function tcon(){    alert("恭喜你学会函数调用了!");}tcon();//调用函数，直接写函数名。</script>
• 第二种情况：在HTML文件中调用，如通过点击按钮后调用定义好的函数。

#### 有参数的函数

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

function add2(x,y){    sum = x + y;    document.write(sum);}

x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。

#### 返回值函数

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

<!DOCTYPE html><htmllang="zh"><head><metacharset="UTF-8"><title>封装绘制矩形方法</title></head><body><divid="canvas-warp"><canvasid="canvas"style="border:1px solid #aaaaaa; display: block; margin: 50px auto;">        你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas></div><script>    window.onload =function(){var canvas = document.getElementById("canvas");        canvas.width =800;        canvas.height =600;var context = canvas.getContext("2d");        drawRect(context,150,50,50,50,"red",5,"blue");        drawRect(context,250,50,50,50,"green",5,"red");        drawRect(context,350,50,50,50,"yellow",5,"black");}function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){        cxt.beginPath();        cxt.moveTo(x, y);        cxt.lineTo(x + width, y);        cxt.lineTo(x + width, y + height);        cxt.lineTo(x, y + height);        cxt.lineTo(x, y);        cxt.closePath();        cxt.lineWidth = borderWidth;        cxt.strokeStyle = borderColor;        cxt.fillStyle = fillColor;        cxt.fill();        cxt.stroke();}</script></body></html>

## 使用rect()方法绘制矩形

context.rect(x,y,width,height);

function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){    cxt.beginPath();    cxt.rect(x, y, width, height);//cxt.closePath();    可以不用closePath()    cxt.lineWidth = borderWidth;    cxt.strokeStyle = borderColor;    cxt.fillStyle = fillColor;    cxt.fill();    cxt.stroke();}

## 调用封装方法，绘制魔性图像

<!DOCTYPE html><htmllang="zh"><head><metacharset="UTF-8"><title>绘制魔性图形</title></head><body><divid="canvas-warp"><canvasid="canvas"style="border:1px solid #aaaaaa; display: block; margin: 50px auto;">        你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas></div><script>    window.onload =function(){var canvas = document.getElementById("canvas");        canvas.width =800;        canvas.height =600;var context = canvas.getContext("2d");        context.beginPath();        context.rect(0,0,800,600);        context.fillStyle ="#AA9033";        context.fill();        context.beginPath();for(var i=0; i<20; i++){            drawWhiteRect(context,200+10* i,100+10* i,400-20* i,400-20* i);            drawBlackRect(context,205+10* i,105+10* i,390-20* i,390-20* i);}        context.beginPath();        context.rect(395,295,5,5);        context.fillStyle ="black";        context.lineWidth =5;        context.fill();        context.stroke();}function drawBlackRect(cxt, x, y, width, height){        cxt.beginPath();        cxt.rect(x, y, width, height);        cxt.lineWidth =5;        cxt.strokeStyle ="black";        cxt.stroke();}function drawWhiteRect(cxt, x, y, width, height){        cxt.beginPath();        cxt.rect(x, y, width, height);        cxt.lineWidth =5;        cxt.strokeStyle ="white";        cxt.stroke();}</script></body></html>