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

要实现的效果如下：

其实难度不大，但是考虑一些人员对于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. 进阶宝典一|SqlServer数据库自动备份设置

    很多人都没机会接触到数据库备份,经常操作的要么是数据库管理员,要么是项目负责人.那是不是说数据库备份就不用学了? 不,其实作为开发人员应该要了解数据备份,数据备份的手段有很多:软件备份.脚本备份.其他 ...

  2. 翻译：《实用的Python编程》05_01_Dicts_revisited

    目录 | 上一节 (4.4 异常) | 下一节 (5.2 封装) 5.1 再谈字典 Python 对象系统主要基于字典实现.本节将对此进行讨论. 字典 字典是命名值(named values)的集合. ...

  3. FTT简单入门板子

    DFT : 1 #include <cstdio> 2 #include <iostream> 3 #include <cmath> 4 #include < ...

  4. Hdu 4821 （字符串hash+map）

    题目链接https://vjudge.net/problem/HDU-4821 题意:给定字符串S ,询问用几个子串满足 : 1.长度为n*len  . 2. n个子串都不相同. 题解:倒序hash将 ...

  5. Linux—用户新建目录和文件的默认权限设置：umask详解

    关注微信公众号:CodingTechWork,一起学习进步. 引言   我们有没有思考过一个问题,在登录Linux系统后,我们创建的目录或者文件的权限,为什么每次创建都是统一的?我们做以下实验:新建一 ...

  6. 001-Java学习前基础

    目录 前言 一.Java语言特性(简单概述) 二.JDK.JRE.JVM三者关系 三.java文件的加载与执行 前言 初次在博客园写博客,想通过这种方式把自己学过的东西梳理一遍,加深自己的记忆,笔记中 ...

  7. vue+django实现websocket连接

    一.概述 在项目中,需要使用websocket,来展示一些实时信息. 这里使用django 3.1.5 二.django项目 安装模块 pip3 install django-cors-headers ...

  8. List集合中的交集 并集和差集

    目录 List集合求交集 并集 差集 Set集合 Lambda表达式 List集合求交集 并集 差集 两种方法求集 Set集合 交集 两个集合中有相同的元素 抽取出来的数据就是为交集 @Test pu ...

  9. Java8中的默认方法

    作者:汤圆 个人博客:javalover.cc 前言 大家好啊,我是汤圆,今天给大家带来的是<Java8中的默认方法>,希望对大家有帮助,谢谢 文章纯属原创,个人总结难免有差错,如果有,麻 ...

  10. OO第三单元——基于JML的社交网络总结

    OO第三单元--基于JML的社交网络总结 一.JML知识梳理 1)JML的语言基础以及基本语法 JML是用于java程序进行规格化设计的一种表示语言,是一种行为接口规格语言.其为严格的程序设计提供了一 ...