最近一个小伙遇到一个需求,客户需要绘制圆点样式的线条。 大致效果是这样的:

思路一:计算并使用arc填充

他自己实现了一种思路,然后咨询我有没有更好的思路。 先看看他的思路是如何实现的,大致代码如下:

// 绘制圆点线,通过计算在线条上进行插值运算,计算出需要绘制圆点的一系列点位
// 然后调用drawDot方法绘制圆点
function DrawDottedLine(x1,y1,x2,y2,dotRadius,dotCount,dotColor){
var dx=x2-x1;
var dy=y2-y1;
var spaceX=dx/(dotCount-1);
var spaceY=dy/(dotCount-1);
var newX=x1;
var newY=y1;
for (var i=0;i<dotCount;i++){
drawDot(newX,newY,dotRadius,dotColor);
newX+=spaceX;
newY+=spaceY;
}
drawDot(x1,y1,3,"red");
drawDot(x2,y2,3,"red");
} // 绘制圆点
function drawDot(x,y,dotRadius,dotColor){
ctx.beginPath();
ctx.arc(x,y, dotRadius, 0, 2 * Math.PI, false);
ctx.fillStyle = dotColor;
ctx.fill();
}

通过上面的简单的示意代码可以看出,绘制逻辑是通过计算直线之间的点位,然后再相应的点上面绘制圆形。

该方法最终可以达到效果,可是有如下问题:

  • 存在性能问题
  • 如果是贝塞尔曲线曲线,可能会涉及到复杂的运行。 贝塞尔曲线的相关知识,可以参考下文进行了解:

    深入理解贝塞尔曲线

当然此思路在绘制一些更加复杂的效果的时候,可能会有用。比如沿线绘制五角星,其他任意形状或者图片等等。或者要绘制的是圆圈而不是填充的圆形的效果,也需要使用此方法。

但是如果只是绘制圆点线,我们可以使用更加简便的方法,主要思路就是使用setLineDash方法+lineCap设置

思路二 setLineDash方法+lineCap设置

lineCap介绍

CanvasRenderingContext2D.lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有3个可能的值,分别是:butt, round and square。默认值是 butt。

使用时,直接赋值即可:

ctx.lineCap = "butt";
ctx.lineCap = "round";
ctx.lineCap = "square";

下面从左到右分别是butt, round ,square的效果:

可以看出 “round”和“square”都是在原本绘制得线段之外扩展了一个半圆和一个矩形,这点在后面会用到。

相关知识,可以参考这篇文章:

canvas基础知识回顾

setLineDash介绍

Canvas 2D API的CanvasRenderingContext2D接口的setLineDash()方法在填充线时使用虚线模式。 它使用一组值来指定描述模式的线和间隙的交替长度。

语法如下:

ctx.setLineDash(segments);
//segments数组。一组描述交替绘制线段和间距(坐标空间单位)长
//度的数字。 如果数组元素的数量是奇数, 数组的元素会被复制并重
//复。例如, `[5, 15, 25]` 会变成 `[5, 15, 25, 5, 15, 25]。`</dd>

绘制圆点线原理

有了上面两个知识点,只需要把两者结合起来,就可以绘制出圆点线,我们首先使用ctx.setLineDash方法把线段分成一段一段得虚线。 然后把lineCap设置为“round”,我们就会得到一段一段得端点是半圆得小线段,代码如下:

                ctx.beginPath();
ctx.lineWidth = 5;
ctx.lineCap = "round"
ctx.setLineDash([10, 30]);
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.lineTo(300, 200);
ctx.quadraticCurveTo(500,300,400,400);
ctx.stroke();

最终绘制得效果如下图所示:

到此,又朋友可能有疑问,这个也不是圆点线得效果。 其实只需要把上面得代码稍微得修改,让实线线段本身得长度变成0即可,修改代码:

...
ctx.setLineDash([0, 30]);
...

最终绘制得效果如下图所示:

结合前面 lineCap 得知识点,相信很容易理解。

如果要绘制方块得效果,也是很容易得,只需要把lineCap 改成"square" 即可:

                ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = "square"
ctx.setLineDash([0, 30]);
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.lineTo(300, 200);
ctx.quadraticCurveTo(500,300,400,400);
ctx.stroke();

效果如下:

此处有人可能会说,lineCap 为“butt”同样可以做出方块得效果,只需要调整setLineDash得参数即可:

        ctx.beginPath();
ctx.lineWidth = 10;
ctx.lineCap = "butt"
ctx.setLineDash([10, 30]);
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.lineTo(300, 200);
ctx.quadraticCurveTo(500,300,400,400);
ctx.stroke();

确实如此,但是使用“square” 得情况下setLineDash函数的参数的一个值始终是0,而“butt” 的情况下,setLineDash函数的参数的第一个参数值需要随着lineWidth变化而变化,很不方便,而且“butt”的情况下,还会出现尾部可能不是一个方块的效果,如下图:

扩展

如果要绘制如下得线条样式,应该怎么做呢:

其实也很简单,就是把同一条线段用不同得lineDash和lineCap绘制两次即可,代码如下:

  // 绘制圆点
ctx.save();
ctx.beginPath();
ctx.lineCap = "round";
ctx.setLineDash([0, 80]);
ctx.lineWidth = 20;
ctx.moveTo(50, 50);
ctx.lineTo(400, 50);
ctx.lineTo(400, 400);
ctx.quadraticCurveTo(750, 450, 800, 800);
ctx.stroke();
//绘制直线
ctx.lineCap = "butt";
ctx.setLineDash([0, 20, 40, 20]);
ctx.lineWidth = 10;
ctx.moveTo(50, 50);
ctx.lineTo(400, 50);
ctx.lineTo(400, 400);
ctx.quadraticCurveTo(750, 450, 800, 800);
ctx.stroke();

需要注意的是绘制第二段的时候,需要调整好lineDash的segments的值。

欢迎关注公众号“ITman彪叔”。彪叔,拥有10多年开发经验,现任公司系统架构师、技术总监、技术培训师、职业规划师。熟悉Java、JavaScript、Python语言,熟悉数据库。熟悉java、nodejs应用系统架构,大数据高并发、高可用、分布式架构。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。

Canvas绘制圆点线段的更多相关文章

  1. canvas学习总结三:绘制路径-线段

    Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText() ...

  2. Canvas学习:封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  3. 使用Canvas绘制图形的基本教程

    原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  4. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  5. canvas总结:线段宽度与像素边界

    在canvas中,我们经常需要绘制线段,主要使用moveTo和lineTo两个方法,moveTo移动至线段起始点,lineTo将线段绘制至终点.同时,绘制线段时可以指定线段的宽度,使用lineWidt ...

  6. canvas 绘制双线技巧

    楔子 最近一个项目,需要绘制双线的效果,双线效果表示的是轨道(类似铁轨之类的),如下图所示: 负责这块功能开发的小伙,姑且称之为L吧,最开始是通过数学计算的方式来实现这种双线,也就是在原来的路径的基础 ...

  7. canvas绘制线和矩形

    ###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...

  8. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  9. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. SDK内本地化处理 localizedStringForKey:value:table:

    参考: 1,https://developer.apple.com/documentation/foundation/nsbundle/1417694-localizedstringforkey 2, ...

  2. 【Java_SSM】(三)maven中的配置文件setting的配置

    这篇博文我们介绍两方面:如何修改setting.xml文件及相应配置(本文maven版本为3.5.0) (1)首先打开maven文件目录--conf,会看见如下目录 (2)复制setting.xml文 ...

  3. 从零开始搭建一个PaaS平台 - 我们要做什么

    前言 从最开始的小公司做小网站,到现在进入现在的公司做项目,发现小公司里很多很多工作都是重复的劳动(增删改查),不过想想也是,业务软件最基础的东西不就是增删改查吗. 但是很多时候,这种业务逻辑其实没有 ...

  4. elasticsearch7.X x-pack破解

    简介: x-pack是elasticsearch的一个收费的扩展包,将权限管理,警告,监视等功能捆绑在一个易于安装的软件包中,x-pack被设计为一个无缝的工作,但是你可以轻松的启用或者关闭一些功能. ...

  5. SQLSTATE[42S01]: Base table or view already exists: 1050 Table 'xxx' already exists

    字面意思 xxx表已存在. 在使用laravel  写同步结构的时候 最好习惯性写个if语句判定是否存在 // 判断数据表是否存在 Schema::hasTable('table'); // 判断数据 ...

  6. C# 基础之参数修饰符

    参数传参的时候一共有四种传递方式: 一.无修饰符传参 也就是说没有传参修饰符,这种情况传过去的是一个副本,本体是不会被改变的 二.out传参修饰符 在传参的参数全面加一个out: public voi ...

  7. 附021.Traefik-ingress部署及使用

    一 Helm部署 1.1 获取资源 [root@master01 ~]# mkdir ingress [root@master01 ~]# cd ingress/ [root@master01 ing ...

  8. Rocket - config - Keys & Params

    https://mp.weixin.qq.com/s/Y42EWrO7IoHRD_yHD4iRLA   介绍配置项.配置值以及他们的使用方式.   参考链接: https://docs.qq.com/ ...

  9. JavaSE (四)程序流程控制 -- if 、switch、for、while

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 目录 前置: * . 从键盘读取数据: 1.分支结构 1.1 if-else结构 1.2 switch- ...

  10. Java 第十一届 蓝桥杯 省模拟赛 计算机存储中有多少字节

    计算机存储中有多少字节 题目 问题描述 在计算机存储中,12.5MB是多少字节? 答案提交 这是一道结果填空的题,你只需要算出结果后提交即可.本题的结果为一个整数,在提交答案时只填写这个整数,填写多余 ...