canvas绘制虚线图表_canvas绘虚线动画-CSDN博客

本文链接：https://blog.csdn.net/netcy/article/details/116529659

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

要实现的效果如下：

其实难度不大，但是考虑一些人员对于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>

绘制效果如下图所示：
result

ps：后面那个读者也给我看了下css的实现， css实现这种东西还是太麻烦，一般不建议。
css
最近有读者加我微信咨询这个问题，如下图所示：

要实现的效果如下：

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

示例代码如下：

<!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>

绘制效果如下图所示：
result

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

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