Canvas学习：绘制虚线和圆点线

阳光穿透心脏的1/2处 2022-09-30 04:59 1143阅读 0赞

[上一节中][Link 1]，使用`moveTo()`、`lineTo()`和`stroke()`可以很轻易的在Canvas中绘制出实线（线段）。整篇文章中看到的都是绘制实现。不知道你和我是不是一样的好奇，那么要在Canvas中绘制虚线和圆点线又要怎么绘制，在Canvas有没有类似的API能直接绘制呢？

其实我也很好奇，看了一些资料，要像绘制实线那样简单或者直接，相对来说是没有的，但不用担心，通过其他的方法也是可以实现的。因为JavaScript是一门万能的语言，那么接下来的内容，就来看看如何在Canvas中绘制虚线和圆点线。

## 绘制虚线 ##

在MDN上，我查到一个叫[`CanvasRenderingContext2D.setLineDash()`][CanvasRenderingContext2D.setLineDash]的API。官方介绍：

> `CanvasRenderingContext2D.setLineDash()` 是 Canvas 2D API 设置虚线样式的方法。

使用方式很简单：

ctx.setLineDash(segments);

其接受一个参数`segments`，这个参数是一个`Array`数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组的元素会被复制并重复。例如，`[5,15,25]`会变成`[5,15,25,5,15,25]`。

言外之意，在Canvas中，可以使用`setLineDash`方法来绘制虚线。既然有这样的方法，那还等什么呢？动手吧。

function drawScreen() { ctx.setLineDash([5,15]); ctx.lineWidth = 4; ctx.strokeStyle = '#f36'; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(400, 100); ctx.stroke(); }

![canvas-4-1.png][]

咱们来改变一下`setLineDash()`里面的值：

ctx.setLineDash([25,5]);

效果变成：

![canvas-4-2.png][]

将上图放大来看：

![canvas-4-3.png][]

上图是`setLineDash([25,5])`的效果，第一个虚线点是`25`个像素，第二个空白点是`5`个像素。然后按这样的组合在不断的循环，直到线段的终点。那么如果，我们把上面的示例再做一下调整：

function drawScreen() { ctx.lineWidth = 4; ctx.beginPath(); ctx.setLineDash([40,30,20]); ctx.strokeStyle = '#f36'; ctx.moveTo(10, 100); ctx.lineTo(400, 100); ctx.stroke(); ctx.beginPath(); ctx.setLineDash([40,30,20,10]); ctx.strokeStyle = 'blue'; ctx.moveTo(10, 120); ctx.lineTo(400, 120); ctx.stroke(); }

![canvas-4-4.png][]

同样我们把它们放大来看，这样好理解一点：

![canvas-4-5.png][]

上图应该解释清楚了吧。简单的理解`setLineDash([])`值，“线|间距”，不断的循环。如此一来，在绘制虚线时，就需要注意他们的循环次数，以及你需要的虚线格式，不然说不定绘制出来的虚线，并不是你所需要的哟。

其实如果你想线和间距一样大小，最简单的方法，就是只给`setLineDash()`传一个值：

ctx.setLineDash([10]);

![canvas-4-6.png][]

上面实现了，我们所说的虚线，也就是CSS中的`dashed`。除此之外，还有圆点线（`dotted`）。接下来就来看，怎么在Canvas中绘制圆点线。

## 绘制圆点线 ##

查了一下，在Canvas中没有直接绘制圆点(dotted)线的API。也就是说，如果要绘制这样的线段（路径）需要特殊处理。也就是说，需要通过JavaScript另外封装一个API。比如封装一个`CanvasRenderingContext2D.dottedLine`，然后通过`context.dottedLine`绘制。接下来，看看如何封装这个API：

在Canvas画布中，通过下面的方式就可以绘制圆点线：

context.dottedLine(10, 100, 200, 200);

![canvas-4-7.png][]

当`x1`和`x2`的值相等时，可以绘制竖线：

context.dottedLine(10, 100, 10, 200);

![canvas-4-8.png][]

同时我们也可以改变间距值：

context.dottedLine(10, 100, 200, 200, 10);

![canvas-4-9.png][]

使用类似的方法，我们就可以绘制一个圆点线的距形：

context.dottedLine(10, 100, 200, 200, 10);
    context.dottedLine(10, 100, 10, 200, 10);
    context.dottedLine(200, 100, 200, 200, 10);
    context.dottedLine(10, 200, 200, 200, 10);

效果如下：

![canvas-4-10.png][]

这样一来是不是也很简单。其实除了封装成Canvas的API之外，我们是不是也可以将其封装成一个函数呢？思考一下？

## 总结 ##

这篇文章主要使用`setLineDash()`绘制虚线（dashed），这是Canvas里提供的API。但在Canvas中没有类似的API，可以直接让我们绘制圆点划线。不过这不是什么大问题，可以利用JavaScript封装一个类似 `setLineDash()`的API `dottedLine`来绘制圆点划线。当然也可以将其封装成一个JavaScript。

在这篇文章中，我们看到的是在Canvask 绘制虚线和圆点划线，那么我们思考一下，在Canvas中怎么绘制对角线。

著作权归作者所有。  
商业转载请联系作者获得授权,非商业转载请注明出处。  
原文: [ http://www.w3cplus.com/canvas/draw-dashed-and-dotted-lines.html][http_www.w3cplus.com_canvas_draw-dashed-and-dotted-lines.html] © [ w3cplus.com][w3cplus.com]著作权归作者所有。

个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我[微信][Link 2]：iamaixiaoxiao。

![1460000008545203_w_276_h_261][]

[Link 1]: http://blog.csdn.net/wulixiaoxiao1/article/details/63251433
[CanvasRenderingContext2D.setLineDash]: http://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash
[canvas-4-1.png]: /images/20220708/6ef7881f21e44f57b6830eee61b94569.png
[canvas-4-2.png]: /images/20220708/5a0c3985499047d996aa7cc9fce9c72d.png
[canvas-4-3.png]: /images/20220708/312764a46f8f46aba605910fa0f70560.png
[canvas-4-4.png]: /images/20220708/59b3cfceee404283ae71cd6b0811c6ba.png
[canvas-4-5.png]: /images/20220708/4966381dc5674f3fb9824cbf7006e61b.png
[canvas-4-6.png]: /images/20220708/992a915db7c0417bbc4ffd22f1871f90.png
[canvas-4-7.png]: /images/20220708/2ee51ec6f5914f5580990f3d9c9fbb44.png
[canvas-4-8.png]: /images/20220708/37176465c6c64685a43da214f06d5201.png
[canvas-4-9.png]: /images/20220708/cf6ed7d02f0c4685a2fcf78cb0c3e291.png
[canvas-4-10.png]: /images/20220708/d5891fcd24994902a634c12b08a13d6a.png
[http_www.w3cplus.com_canvas_draw-dashed-and-dotted-lines.html]: http://www.w3cplus.com/canvas/draw-dashed-and-dotted-lines.html
[w3cplus.com]: http://www.w3cplus.com/
[Link 2]: http://lib.csdn.net/base/wechat
[1460000008545203_w_276_h_261]: /images/20220708/68109cf96fd54d948372376008f3dfad.png