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

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

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

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

绘制虚线

在MDN上,我查到一个叫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();
}

</body></html>

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/canvas/draw-dashed-and-dotted-lines.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部