html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点

接下来我将详细讲解如何使用HTML5 Canvas画直线并设置线条的样式，包括颜色、端点、交汇点等。

HTML5 Canvas画直线

在使用Canvas画直线之前，我们需要先准备好Canvas画布，具体方法为：

<canvas id="myCanvas"></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
</script>

其中canvas标签是Canvas画布，我们需要获取它的上下文，以便绘制图形。这里我们使用canvas.getContext("2d")获取2D上下文。

接下来，我们可以使用ctx.lineTo()方法绘制直线。该方法需要传入直线终点的坐标值，例如：

ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

上述代码表示从 (0,0) 开始绘制一条直线，直线的终点坐标为 (200,100)。

需要注意的是，我们还需要使用ctx.stroke()方法来绘制该直线。

设置线条样式

除了绘制直线，我们还可以设置线条的样式，包括颜色、宽度、端点和交汇点等。接下来我们将逐一介绍如何设置这些样式。

设置线条颜色

设置线条颜色可以使用ctx.strokeStyle属性，例如：

ctx.strokeStyle = "red";

该属性值可以是任何合法的CSS颜色值。

设置线条宽度

设置线条宽度可以使用ctx.lineWidth属性，例如：

ctx.lineWidth = 5;

设置线条端点

设置线条端点可以使用ctx.lineCap属性，该属性值可以是以下三种：

• butt(默认)：平直的线条端点；
• round：圆形线条端点；
• square：正方形线条端点。

例如：

ctx.lineCap = "round";

设置线条交汇点

设置线条交汇点可以使用ctx.lineJoin属性，该属性值可以是以下三种：

• miter(默认)：尖锐的交汇点；
• round：圆形交汇点；
• bevel：斜角交汇点。

例如：

ctx.lineJoin = "bevel";

示例

下面是两个综合示例，可以帮助你更好地理解如何使用Canvas画直线并设置线条样式。

示例一：绘制彩虹线条

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];

ctx.lineWidth = 10;
ctx.lineCap = "round";

for (var i = 0; i < colors.length; i++) {
  ctx.strokeStyle = colors[i];
  ctx.beginPath();
  ctx.moveTo(50, i * 30 + 50);
  ctx.lineTo(250, i * 30 + 50);
  ctx.stroke();
}

示例二：绘制网格线

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

for (var i = 0; i <= 10; i++) {
  var x = i * 50;
  ctx.moveTo(x, 0);
  ctx.lineTo(x, 500);
}

for (var j = 0; j <= 10; j++) {
  var y = j * 50;
  ctx.moveTo(0, y);
  ctx.lineTo(500, y);
}

ctx.strokeStyle = "gray";
ctx.lineWidth = 1;
ctx.stroke();

以上就是HTML5 Canvas画直线与设置线条样式的完整攻略，希望能对你有所帮助。