html5 rect()、fillrect()、strokeRect()的區別

原創

2020-02-20 15:17

1.rect() 方法是單純的畫出一個矩形框，調用stroke() 或 fill()後纔會真正作用於畫布。

例如：

<!DOCTYPE html>
<html>
	<head>
		<title>canvas test</title>
	</head>
	<body>
		<canvas id="mytest" width="200px" height="100px" style="border:1px solid red">
			your browser does not support HTML5 canvas tag!
		</canvas>
		<script>
			var c = document.getElementById('mytest');
			var ctx = c.getContext('2d');
			ctx.rect(0,0,100,50);    //僅僅是畫出一個區域
			ctx.fillStyle = 'red';
			ctx.fill();
		</script>
	</body>
</html>

樣式：

2.fillRect() 方法是畫出一個有填充顏色的矩形框（默認是黑色的）

例如：

<!DOCTYPE html>
<html>
	<head>
		<title>canvas test</title>
	</head>
	<body>
		<canvas id="mytest" width="200px" height="100px" style="border:1px solid red">
			your browser does not support HTML5 canvas tag!
		</canvas>
		<script>
			var c = document.getElementById('mytest');
			var ctx = c.getContext('2d');
			//ctx.rect(0,0,100,50);
			ctx.fillStyle = 'red';
			ctx.fillRect(0,0,100,50);  //如果不定義fillstyle，那麼會顯示默認的黑色
		</script>
	</body>
</html>

樣式：

3.strokeRect() 方法是用一個預定義的筆觸畫出一個矩形框，你就可以想成使用一直有顏色的畫筆去畫一個矩形

例如

<!DOCTYPE html>
<html>
	<head>
		<title>canvas test</title>
	</head>
	<body>
		<canvas id="mytest" width="200px" height="100px" style="border:1px solid red">
			your browser does not support HTML5 canvas tag!
		</canvas>
		<script>
			var c = document.getElementById('mytest');
			var ctx = c.getContext('2d');
			//ctx.rect(0,0,100,50);
			//ctx.fillStyle = 'red';
			ctx.strokeRect(20,20,100,50);
		</script>
	</body>
</html>

樣式：