canvas 設定線條的樣式

admin發表於2018-08-09
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.moveTo(10, 10);
  ctx.lineTo(100, 100);
  ctx.lineWidth = 10;
  ctx.strokeStyle = "red";
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="738" height="280"></canvas>
</body>
</html>

上面的程式碼通過lineWidth和strokeStyle屬性設定了線條的寬度和顏色。

strokeStyle屬性值也可以使用RGBA顏色，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
ctx.strokeStyle = "rgba(160,100,150,0.6)";

再來看一段程式碼例項:

[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.moveTo(10, 10);
  ctx.lineTo(100, 100);
  ctx.lineWidth = 10;
  var linear = ctx.createLinearGradient(10, 10, 100, 100);
  linear.addColorStop(0.1, "red");
  linear.addColorStop(0.5, "blue");
  linear.addColorStop(1, "green");
  ctx.strokeStyle = linear;
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="738" height="280"></canvas>
</body>
</html>

線條的顏色也可以設定為漸變色，再來看一段程式碼例項:

[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.moveTo(10, 10);
  ctx.lineTo(100, 100);
  ctx.lineWidth = 10;
  var img = new Image();
  img.onload = function () {
    var pat = ctx.createPattern(img, "repeat");
    ctx.strokeStyle = pat;
    ctx.stroke();
  }
  img.src = "demo/js/img/lamp.gif";
}
</script>
</head>
<body>
<canvas id="canvas" width="738" height="280"></canvas>
</body>
</html>

strokeStyle屬性值也可以是一個元素重複的pattern物件。

關於createPattern具體用法可以參閱canvas createPattern()一章節。

兩個線條相交的樣式:

使用lineJoin屬性即可實現設定兩個線條相交點的樣式。

具體可以參閱canvas lineJoin一章節。

設定線條兩端的樣式:

使用lineCap屬性即可實現此功能。

具體可以參閱canvas lineCap一章節。

相關文章