fillRect方法用於在畫布上繪製已填入的矩形，語法為「context.fillRect(x,y,width,height);」；其中，參數「x」和「y」表示矩形左上角的x與y座標，，「width」和「height」表示矩形的寬度與高度。
本文操作環境：Windows7系統、Dell G3電腦、HTML5&&CSS3版。
fillRect是HTML5中的方法，可以用來在畫布上繪製已填滿的矩形，預設的填滿顏色是黑色，我們就來看看fillRect方法的具體使用。
我們先來看看fillRect的基本語法
context.fillRect(x,y,width,height);
x表示矩形左上角的 x 座標。
y表示矩形左上角的 y 座標。
width表示矩形的寬度。
height表示矩形的高度。
（參考：HTML5 canvas）
下面我們來看具體的範例
程式碼如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<canvas id="rectangle" width="200" height="200"></canvas>
<script>
// 使用JS获取canvas元素
var canvas=document.getElementById('rectangle');
// 获取canvas
var c=canvas.getContext('2d');
// 在画布上绘制一个矩形
c.fillRect(50,50,100,100);
</script>
</body>
</html>效果如下：繪製了一個填滿黑色的長方形
這篇文章到這裡就全部結束了，更多有關前端的精彩內容大家可以關注PHP中文網的其他相關欄位教學！ ！ ！
以上是fillRect方法怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
