canvas描邊和填充介紹

admin發表於2018-08-10
Canvas

繪圖的方式通常有兩種，描邊和填充；下面分別通過程式碼例項對此做一下介紹。

一.描邊:

所謂的描邊，就是為路徑繪製出邊緣線條。

使用stroke()方法即可實現描邊功能，程式碼例項如下:

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

預設條件下，描邊的寬度是1px，黑色，當然這一切都是可以自定義的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var gradient = ctx.createLinearGradient(0, 0, 170, 0);
  gradient.addColorStop("0", "magenta");
  gradient.addColorStop("0.5", "blue");
  gradient.addColorStop("1.0", "red");
  ctx.strokeStyle = gradient;
  ctx.lineWidth = 5;
  ctx.rect(20, 20, 150, 100);
  ctx.stroke();
}
  </script>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas>
</body>
</html>

上面的程式碼將矩形的描邊樣式設定為線性漸變，寬度為5px。

相關閱讀:

（1）.strokeStyle屬性參閱canvas strokeStyle一章節。

（2）.lineWidth屬性參閱canvas lineWidth一章節。

（3）.rect()方法參閱canvas rect()一章節。

二.填充:

所謂填充就是用指定顏色或者圖案來填充路徑包裹的區域。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var canvas = document.getElementById("canvas");
  var 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.fillStyle = "green";
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

上面的程式碼實現了對路徑的填充功能，填充顏色為綠色。

如果一個路徑沒有閉合，會不會被填充呢，程式碼例項如下:

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

沒有閉合的路徑也是可以填充的，但是沒有閉合的部分沒有描邊。

再來看一段程式碼例項:

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

上面的程式碼無法進行填充，因為中間路徑斷開了，必須“一筆”下來的路徑可以填充。

相關文章