canvas fillRect()

admin發表於2019-08-06
Canvas

fillRect方法可以使用fillStyle指定的顏色填充矩形。

使用方式非常簡單，但是有些細節需要特別注意，後面會結合程式碼介紹。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
fillRect(x, y, width, height)

引數解析：

（1）.x：必需，矩形左上角x軸座標。

（2）.y：必需，矩形左上角y軸座標。

（3）.width：必需，矩形的寬度。

（4）.height：必需，矩形的高度。

關於座標系相關知識可以參閱canvas座標系原點一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
   
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 100, 50);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="450"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/123723kejae9g4lnl0go29.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

填充顏色是由fillStyle規定。

也可以設定填充透明度，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
   
  ctx.fillStyle = "rgba(100, 40, 40, 0.3)";
  ctx.fillRect(10, 10, 100, 50);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="450"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/123809y918n89ghbxqff8n.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

也是通過fillStyle屬性設定，顏色值採用RGB方式。

更多設定透明度相關知識可以參閱canvas 設定透明度一章節。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 100, 50);
  ctx.fillStyle = "blue";
  ctx.fillRect(10, 80, 100, 50);
  
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="450"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/123844mxq7uiz2tuqttam9.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼繪製了兩個不同顏色的矩形。

一切很正常，因為fillStyle屬性分別規定了紅色和藍色兩種填充色。

大家有沒有想過，後面設定的填充顏色為什麼沒有覆蓋前面的填充顏色。

看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
}
</style>
<script>
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var ctx = cvs.getContext("2d");
  ctx.lineWidth = 10;
  ctx.moveTo(10, 10);
  ctx.lineTo(100, 100);
  ctx.strokeStyle = "red";
  ctx.stroke();
  
  ctx.moveTo(10, 40);
  ctx.lineTo(100, 200);
  ctx.strokeStyle = "blue";
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="738" height="280"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/123909vcec9fczyn3e3g22.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼繪製了兩條直線，第一條直線設定描邊顏色為紅色，第二條直線設定描邊顏色為藍色。

但最終繪製效果是兩條直線都是藍色。

產生此現象的本質原因是由於這兩個直線在同一個路徑下，所以描邊會對整個路徑有效，所以後面的描邊會覆蓋在前面的描邊之上，於是兩個直線的都為藍色，更多內容參閱如下兩篇文章：

（1）.canvas路徑與子路徑詳解一章節。

（2）.canvas繪製圖案是重疊繪製而不是重置一章節。

想讓兩條直線分別顯示各自的描邊色，只要將兩條直線放置於不同的路徑直線即可。

程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
}
</style>
<script>
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var ctx = cvs.getContext("2d");
  ctx.lineWidth = 10;
  ctx.moveTo(10, 10);
  ctx.lineTo(100, 100);
  ctx.strokeStyle = "red";
  ctx.stroke();
  // 開始一個新路徑
  ctx.beginPath();
  ctx.moveTo(10, 40);
  ctx.lineTo(100, 200);
  ctx.strokeStyle = "blue";
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="738" height="280"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/124008v668c696c9tz9jwh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

只要使用beginPath方法建立一個新的路徑即可。

由此可以猜想fillRect不但能夠填充矩形，而且還可以建立新路徑並清除之前路徑和子路徑的功能。

相關文章