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

要实现的效果如下：

其实难度不大，但是考虑一些人员对于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. python中函数与方法的区别

    在python中,其实函数和方法的区别取决于其调用者,在普通的函数定义中就叫做函数 例如: def func(): print('这是一个函数') 而在一个类中定义时,就将其分为两种情况 第一种:被称 ...

  2. 【odoo14】第十三章、网站开发（对外服务）

    本章我们将介绍一些关于odoo web服务方面的基础知识.进阶的内容,将在第十四章介绍. odoo中的web请求是由python的werkzeug库驱动的.odoo为了操作方便,对werkzeug进行 ...

  3. renren-fast部署发布教程（tomcat）

    renren-fast部署发布教程(tomcat) 说明:renren的开发文档需要付费,官方的生产部署介绍相对比较简单,因此记录自己的部署过程 为了方便,前后端我都部署在同一台linux服务器上,其 ...

  4. 1.mysql读写

    一.数据库读取(mysql) 参数 接受 作用 默认 sql or table_name string 读取的表名,或sql语句 无 con 数据库连接 数据库连接信息 无 index_col Int ...

  5. 复制粘贴Ctrl+C改为自定义单键

    目录 那一瞬间不想用Ctrl+C了 (一)搜索渠道 关键词搜索 (二)方案对比 (三)最终方案Ditto 使用方法 (四)案例 1. 替换Ctrl+C快捷键: 2. 将英文小写替换为大写: 那一瞬间不 ...

  6. java例题_47 读取 7 个数（1—50）的整数值，每读取一个值，程序打印出该值个数的＊

    1 /*47 [程序 47 打印星号] 2 题目:读取 7 个数(1-50)的整数值,每读取一个值,程序打印出该值个数的*. 3 */ 4 5 /*分析 6 * 1.多次读取---for循环 7 * ...

  7. 一文教你搞懂 Go 中栈操作

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com/archives/513 本文使用的go的源码15.7 知识点 LInux 进程在内存布 ...

  8. C# .NET Socket 简单实用框架，socket组件封装

    参考资料 https://www.cnblogs.com/coldairarrow/p/7501645.html 根据.NET Socket 简单实用框架进行了改造,这个代码对socket通信封装还是 ...

  9. Distributed | Paxos

    自Paxos问世以来就持续垄断了分布式一致性算法,Paxos这个名词几乎等同于分布式一致性.Google的很多大型分布式系统都采用了Paxos算法来解决分布式一致性问题.在学习了Raft算法之后自然不 ...

  10. Mybatis-plus 下

    Mybatis-plus 下 查询操作 1.查询单个用户 @Test public void testSelectById(){ User user = userMapper.selectById(1 ...