在Canvas画布上如何绘制虚线？

图形开发canvashtml5

在Canvas上绘制虚线，例如绘制下图中的虚线段。它的绘制方法与实线段的绘制方法是类似的，只是在lineTo()方法后面增加了setLineDash()方法，这个方法是用来设置虚线的样式，它的参数是一个整数数组，其含义为：“虚线长度 空格长度 虚线长度 空格长度”。例如我在setLineDash()方法中设置虚线长度为10，空格长度为10，对应左图中第一条虚线，在setLineDash()方法中设置虚线长度为20，空格长度为5，对应左图中第二条虚线，最后使用stroke()方法将虚线段在画布上实际地绘制出来，形成可见的图形。

运行效果

以下是一个网页示例，展示了如何在Canvas上绘制一条虚线：

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 绘制虚线示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
        您的浏览器不支持Canvas。
    </canvas>

    <script>
        // 获取Canvas元素  
        var canvas = document.getElementById('myCanvas');  
        // 获取绘图上下文  
        var ctx = canvas.getContext('2d');  
  
        // 设置虚线样式  
        // 数组中的第一个数字是实线部分的长度，第二个数字是空白部分的长度，依此类推  
        ctx.setLineDash([15, 15]);  
  
        // 可选：设置虚线样式的起始偏移量  
        ctx.lineDashOffset = 0; // 默认为0  
  
        // 设置线条的其他样式  
        ctx.lineWidth = 5; // 线条宽度  
        ctx.strokeStyle = 'black'; // 线条颜色，虽然这里设置为黑色，但虚线效果由setLineDash定义  
  
        // 开始绘制虚线  
        // 设置线条的起始点  
        ctx.beginPath();  
        ctx.moveTo(10, 100);  
        // 设置线条的结束点  
        ctx.lineTo(190, 100);  
  
        // 绘制线条  
        ctx.stroke();  
    </script>
</body>
</html>

在这个示例中，我们首先通过setLineDash()方法定义了一个虚线样式，其中[15, 15]表示每段实线长度为15个单位，每段空白长度为15个单位。然后，我们使用lineWidth和strokeStyle设置了线条的宽度和颜色（尽管颜色对于虚线样式的可见性不是必需的，因为虚线样式是由setLineDash定义的）。

注意，在调用stroke()方法之前，我们使用beginPath()方法开始了一个新的路径，并使用moveTo()和lineTo()方法定义了线条的起始点和结束点。最后，通过调用stroke()方法，我们按照定义的虚线样式绘制了线条。

将这段代码保存为HTML文件并在浏览器中打开，将看到一条从左上角到右下角的虚线。

上一篇：求助详细讲解在Canvas画布上绘制折线的方法

下一篇：在Canvas画布上如何绘制实线段？