下面在canvas画布中绘制一个矩形。本例调用了脚本文件中的draw函数进行图形描绘。该函数放置在body的属性中，使用onload＝“draw（‘canvas’）；”语句可调用脚本文件中的draw函数进行图像描画。
在本例中draw函数的功能是把canvas画布的背景用浅蓝色涂满，然后画出一个绿色正方形，正方形的边框为红色，如图8.3所示。
图8.3 在canvas画布上画矩形
用canvas元素绘制矩形的具体步骤如下：
（1）用document.getElementById（）方法获得canvas元素，代码如下：
varcanvas=document.getElementById(id);
（2）使用canvas对象的getContext（）方法获得上下文，同时传入使用的canvas类型，这里传入的仍然是“2d”，代码如下：
VarContext=canvas.getContext(‘2d’);
（3）填充与绘制边框。用canvas元素绘制图形，有两种方式——填充（fill）与绘制边框（stroke）。填充是指填满图形内部；绘制边框是指不填满图形内部，只绘制图形的边框。要结合这两种方式绘制图形。
（4）设定绘图式样（style）。在进行图形绘制的时候，首先要设定好绘图的式样及如何调用有关方法。所谓绘图式样主要指图形的颜色以及颜色以外的样式。本例主要应用了如下两种样式：
①设定填充图形的样式：fillStyle——填充的样式，在该属性中设置填充的颜色值。
②设定图形边框的样式：图形边框的样式，该属性值设置边框的颜色值。
代码如下：(www.xing528.com)
context.fillStyle="#eeeeff";
context.strokeStyle="red";
（5）指定线宽。图像上下文的lineWidth属性设置图形边框的宽度，代码如下：
context.lineWidth=1;
（6）指定颜色值。用颜色名或者十六进制的颜色值定义颜色，例如“red”“blue”“＃EEEEFF”。也可以用rgb或rgba函数来指定颜色值。
（7）矩形的绘制。用fillRect方法绘制矩形，用strokeRect方法绘制矩形边框，代码如下：
context.fillRect(50,50,100,100); //画矩形内部
context.strokeRect(50,50,100,100); //画矩形边框
画矩形边框或矩形内部需要4个参数，分别表示矩形左上角的横坐标、纵坐标，和矩形右下角的横坐标和纵坐标。
综合代码如下：
程序运行界面，如图8.4所示。
图8.4 在canvas画布上画带边框的矩形
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
