【網(wǎng)絡(luò)建設(shè)系統(tǒng)】
fiIIRect(x,y, weight, height)
其中的參數(shù)含義如下。
x，y：矩形左上角的坐標(biāo)。
weight，height：矩形的寬度和高度。
說明：fillRect()方法使用fillStyle屬性所指定的顏色、漸變和模式來填充指定盼矩形
(2)繪制矩形輪廓
strokeRect()方法用來繪制矩形的輪廓，語法格式為：
strokeRect(x,y, weight, height)
其中的參數(shù)含義如下。
x，y：矩形左上角的坐標(biāo)。
weight，height：矩形的寬度和高度。
說明：strokeRect()方法按照指定的位置和大小繪制一個矩形的邊框（但并不填充矩形的內(nèi)部），線條顏色和線條寬度由strokeStyle和lineWidth屬性指定。
【案例5-8]繪制填充的矩形和矩形輪廓。
【案例展示】本例文件5-8.html在瀏覽器中的顯示效果如圖5-9所示。
【學(xué)習(xí)目標(biāo)】掌握繪制矩形的各種方法。
【知識要點(diǎn)】掌握繪制矩形的相關(guān)方法和屬性。
代碼如下：
<! doctype html>
<html>
<head>
<meta charset=”gb2312”>
<title>繪制矩形<／title>
<／head>
圖5-9頁面的顯示效果
<body>
<canvas id="myCanvas" width="200" height="100" style="border:lpx solid #c3c3c3;">
您的瀏覽器不支持canvas元素．
</canvas>
<script type="text/j avascript">
var c=document.getElementById("myCanvas"); ／／獲取畫布對象
var cxt=c.getContext("2d"); ／／獲取畫布上繪圖的環(huán)境
cxt.fillStyle="#ff0000”； ／／設(shè)置填充顏色
cxt.fillRect(0,0,100,50); ／／繪制填充矩形
cxt.strokeStyle="#OOOOff'’； ／／設(shè)置輪廓顏色
cxt.lineWidth="5"; ／／設(shè)置輪廓線條寬度
cxt.strokeRect(120,60,70,30); ／／繪制矩形輪廓
</script>
</body>
<[html>
【案例說明】本例中畫布的邊框采用CSS樣式style="border:lpx solid #c3c3c3;”來實(shí)現(xiàn)，CSS樣式將在本書的后續(xù)章節(jié)中講解。（北京網(wǎng)站建設(shè)公司）
