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

要实现的效果如下：

其实难度不大，但是考虑一些人员对于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. 前端笔记：React的form表单全部置空或者某个操作框置空的做法

    1.全部置空的做法,一般在弹出框关闭后,需要重置该form所有表单: this.props.form.resetFields(); 2.针对某个操作框置空的做法 例如,form表单里有一个部门和一个张 ...

  2. SpringMVC自定义兼容性Handler

    写在前面 看到这篇博客时,默认你知道Spring MVC中handler的作用,及前台请求到响应的的流转. 感谢网上其他大佬博客给我的借鉴,博客地址这里忘记了. 自定义Handler 我有时候会考虑是 ...

  3. Java中的四种权限修饰符及六种非访问修饰符（简识）

    一.是哪四种访问权限修饰符呢? public > protected > [default] > private (公共的 ) (受保护的) (默认的) (私有的) 二.简单认识四种 ...

  4. Harry And Magic Box HDU - 5155

    题目链接:https://vjudge.net/problem/HDU-5155#author=0 题意:在一个n*m的方格中要满足每一行每一列至少有一个珠宝,问总共有多少种方案. 思路:利用递推的思 ...

  5. 【JVM进阶之路】一：Java虚拟机概览

    1.Java简史 Java语言是一门通用的.面向对象的.支持并发的程序语言.全球从事Java相关开发的人员已经数以百万计. 从1995年"Java"正式出现以来,Java已经经历了 ...

  6. 攻防世界 reverse elrond32

    tinyctf-2014 elrond32 1 int __cdecl main(int a1, char **arg_input) 2 { 3 if ( a1 > 1 && c ...

  7. 自己挖的坑自己填--jxl进行Excel下载堆内存溢出问题

    今天在进行使用 jxl 进行 Excel 下载时,由于数据量大(4万多条接近5万条数据的下载),数据结构过于负责,存在大量大对象(虽然在对象每次用完都设置为null,但还是存在内存溢出问题),加上本地 ...

  8. 原创 Spring Boot 2.3 新特性分层JAR

    背景 在我们实际生产容器化部署过程中,往往会遇到 Docker 镜像很大,部署发布很慢的情况 影响 docker 镜像大小的因素,主要有以下三个方面: 基础镜像的大小 .尽量选择 aphine 作为基 ...

  9. 前端面试回顾（1）---javascript的面向对象

    前言 前一阵面试,过程中发现问到一些很基础的问题时候,自己并不能很流畅的回答出来.或者遇到一些基础知识的应用,由于对这些点理解的不是很深入,拿着笔居然什么都写不出来,于是有了回顾一下这些基础知识的想法 ...

  10. fish shell 自动补全子命令

    之前在 「创建 fish shell 自动补全文件」 中介绍了如何创建 fish 的补全文件,实现对命令的友好补全提示.通过形如 complete -c <command> -a [&qu ...