HTML5中Canvas rect(), strokeRect() 和 fillRect() 的區別
阿新 • • 發佈：2019-02-12
他們都接受相同的引數，見頁面表格。唯一不同的實現方式與效果方面有差異。
其中fillRect()與strokeRect() 在呼叫後會立即在畫布上畫面效果，而rect()不會立即將圖形畫出，只有在呼叫了stroke()方法之後，才會實際作用於畫布。
fillRect()
從字面上很好理解fillRect()與其他兩個的區別，它是執行填充操作。填充一個矩形區域。
下面是來自W3SHOOL中文站點對它的具體引數及API的詳解：
定義和用法
fillRect() 方法繪製"已填色"的矩形。預設的填充顏色是黑色。
|
引數 |
描述 |
|
x |
矩形左上角的 x 座標 |
|
y |
矩形左上角的 y 座標 |
|
width |
矩形的寬度，以畫素計 |
|
height |
矩形的高度，以畫素計 |
strokeRect()
strokeRect() 方法繪製矩形（不填色）。筆觸的預設顏色是黑色。
下面看一下strokeRect() 與fillRect()的例子。
<html>
<head>
<title>HTML 5 Canvas rect</title>
</head>
<body>
<canvas id="c" width="400" height="300"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById('c');
var ctx = c.getContext('2d');
// draw rectangle via strokeRect() method
ctx.strokeRect(0, 0, 100, 100);
// draw rectangle via fillRect() method
ctx.fillRect(101, 0, 100, 100);
</script>
</html>效果：
rect()
rect() 方法建立矩形。但它並不會真正將矩形畫出，只能呼叫stroke() 或 fill()後才會真正作用於畫布。
下面的例子將展示這一特性。
<html>
<head>
<title>HTML 5 Canvas rect</title>
</head>
<body>
<canvas id="c" width="400" height="300"></canvas>
</body>
<script type="text/javascript">
var c = document.getElementById('c');
var ctx = c.getContext('2d');
// draw rectangle via strokeRect() method
ctx.rect(0, 0, 100, 100);
//set time out, the rectngle will be drawed out after 5 secs.
setTimeout(function () { ctx.stroke() }, 5000)
</script>
</html>