最近有读者加我微信咨询这个问题，如下图所示：

要实现的效果如下：

其实难度不大，但是考虑一些人员对于canvas不熟悉，还是简单的介绍下。

其实该图表，就是一个圆圈外面在套一个圆弧的效果， 主要的难点在于不知道怎么绘制圆圈的虚线效果。 其实canvas本身已经支持了虚线的绘制，就是一个api调用的事情，api是setLineDash。

示例代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Line Dash</title>

    <style>

        canvas {

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="600" height="400"></canvas>

    <script>

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

        var w = canvas.width,

                h = canvas.height;

        var x = w / 2,

                y = h / 2;

        ctx.save();

        ctx.strokeStyle = "gray";

        ctx.setLineDash([5,5]);

        ctx.lineWidth = 10;

        ctx.beginPath();

        ctx.arc(200,200,75,0,Math.PI *2);

        ctx.stroke();

        ctx.restore();

        ctx.save();

        ctx.beginPath();

        ctx.lineWidth = 12;

        ctx.lineCap = "round";

        ctx.joinCap = "round";

        ctx.strokeStyle = "red";

        ctx.arc(200,200,75,0,-Math.PI/2,Math.PI /2 );

        ctx.stroke();

        ctx.restore();

    </script>

</body>

</html>

绘制效果如下图所示：

ps： 后面那个读者也给我看了下css的实现， css实现这种东西还是太麻烦，一般不建议。

关注公众号“ITMan彪叔” 可以及时收到更多有价值的文章。另外如果对可视化感兴趣，可以和我交流，微信541002349.

canvas绘制虚线图表的更多相关文章

  1. Canvas学习：封装Canvas绘制基本图形API

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

  2. canvas学习总结三：绘制虚线

    上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setL ...

  3. canvas学习总结四：绘制虚线

    上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setL ...

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

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

  5. 9款基于HTML5/SVG/Canvas的折线图表应用

    1.华丽的HTML5图表 可展示实时数据 HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大.这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势 ...

  6. Android自己定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...

  7. HTML5 canvas绘制雪花飘落

    Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等. 没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和F ...

  8. 使用Canvas绘制简单的时钟控件

    Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等. 没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和F ...

  9. 第165天：canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

随机推荐

  1. 性能追击：万字长文30+图揭秘8大主流服务器程序线程模型 | Node.js,Apache,Nginx,Netty,Redis,Tomcat,MySQL,Zuul

    本文为<高性能网络编程游记>的第六篇"性能追击:万字长文30+图揭秘8大主流服务器程序线程模型". 最近拍的照片比较少,不知道配什么图好,于是自己画了一个,凑合着用,让 ...

  2. super_curd组件技术点总结

    1.基于包的导入的方式实现单例模式 # test1.py class AdminSite(object): def __init__(self): self.registry = {} self.ap ...

  3. 如何安装jenkins并简单的使用

    如何安装jenkins并使用 一.jenkins 简介: Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括 : 1.持续的软件版本发布/测试项目: 2.监控外部调用 ...

  4. unittest系列（一）unittest简介和示例

    unittest - 单元测试框架 单元测试框架是受到 JUnit 的启发,与其他语言中的主流单元测试框架有着相似的风格.其支持测试自动化,配置共享和关机代码测试.支持将测试样例聚合到测试集中,并将测 ...

  5. win8 下删除服务

    1.右键 我的电脑-管理-服务和应用程序-服务,找到想要删除的服务,双击后复制服务名称. 2.管理员身份运行cmd 在命令框中输入 sc delete "secbizsrv" 就删 ...

  6. Apache Pulsar 在能源互联网领域的落地实践

    关于 Apache Pulsar Apache Pulsar 是 Apache 软件基金会顶级项目,是下一代云原生分布式消息流平台,集消息.存储.轻量化函数式计算为一体,采用计算与存储分离架构设计,支 ...

  7. Java并发编程之同步/并发集合

    同步集合 Java中同步集合如下: Vector:基于数组的线程安全集合,扩容默认增加1倍(ArrayList50%) Stack:继承于Vector,基于动态数组实现的一个线程安全的栈 Hashta ...

  8. 攻防世界 resver catch-me

    catch-me asis-ctf-quals-2016 附件给了个压缩包文件,重命名,解压,获取到elf文件 程序有两处关键比较 第一处: 这里进行动态调试,得到v3=0xB11924E1, byt ...

  9. 错误提示：Access denied for user 'GC'@'localhost' (using password: YES)

    错误描述:使用的是C3P0连接池 Spring整合Mybatis时出现错误 java.sql.SQLException: Access denied for user 'GC'@'localhost' ...

  10. python中gzip模块的使用

    gzip模块能够直接压缩和解压缩bytes-like类型的数据,同时也能实现对应格式文件的压缩与解压缩 一.数据压缩与解压缩 压缩 函数-gzip.compress(data, compresslev ...