canvas 繪製矩形

admin發表於2018-08-10
Canvas

矩形是最為簡單的圖案一直，canvas提供了多種繪製方式。

特別說明：canvas沒有內建繪製圓角矩形的方法，不過可以模擬實現。

本文不做介紹，具體參閱canvas 繪製圓角矩形一章節。

下面將通過程式碼例項介紹一下利用canvas如何繪製矩形圖案。

一.lineTo()方法繪製矩形：

此方式在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.moveTo(100, 100);
  ctx.lineTo(200, 100);
  ctx.lineTo(200, 200);
  ctx.lineTo(100, 200);
  ctx.lineTo(100, 100);
  //設定線條的寬度
  ctx.lineWidth = 10;
  //設定線條的填充顏色和透明度
  ctx.strokeStyle = 'rgba(255,0,0,0.5)';
  ctx.closePath();
  ctx.stroke();
    
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/20/134348eck59qon5jrr5woo.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

繪製矩形的原理很簡單，就是讓直線首尾相接。

然後通過lineWidth設定邊框的粗細，strokeStyle設定邊框的顏色。

二.strokeRect()方法繪製矩形:

此方法可以繪製一個非填充的矩形。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
ctx.strokeRect(10,10,100,100);

前兩個引數規定矩形左上角的座標，最後兩個引數規定矩形的寬高。

程式碼例項如下:

[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.strokeRect(10,10,100,100);
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/20/135039r7gj5o2eo8jv2cjz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}


程式碼分析如下：

（1）.繪製無填充的矩形，也就是隻有邊框，沒有內部填充的矩形。

（2）.沒有使用stroke()方法，因為strokeRect()方法直接繪製矩形，能夠自動開始並結束一條路徑。

三.fillRect()方法繪製矩形:

此方法可以繪製一個填充的矩形。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
ctx.fillRect(10,10,100,100);

程式碼例項如下:

[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="#ccc";
  ctx.fillRect(10,10,100,100);
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/20/140236usg7idcqzagis9vz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.繪製一個帶有填充的矩形。

（2）.預設填充是純很色，不過可以通過fillStyle屬性修改。

（3）.fillRect方法可以自動建立並結束一個路徑。

四.rect()方法繪製矩形：

此方法也可以繪製矩形，與上面方法不同的是，它不能夠自動繪製矩形並建立和結束路徑。

所以如果描邊，那麼就呼叫stroke方法，如果需要填充，需要使用fill方法。

程式碼例項如下:

[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.rect(10, 10, 100, 100);
  ctx.fillStyle = "green";
  ctx.fill();
  ctx.stroke();
}
</script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/20/140834owgsxbqy4x9p94z0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼繪製一個具有描邊與填充的矩形。

fillStyle可以設定填充，strokeStyle可以設定描邊。

相關文章