在 HTML5 Canvas 上绘制虚线？

Question

我想在 HTML5 画布上画一些虚线。但我找不到有这样的功能。画布路径只能绘制实线。人们曾尝试使用 CSS 中的一些边框功能（点、虚线）来绘制虚线，但它们只能是水平或垂直的。所以我陷入了困境。我还找到了一个名为RGraph 的库，它可以绘制虚线。但是使用外部库会使绘图变得非常缓慢。那么有没有人知道如何实现这一点？任何帮助将不胜感激。

Answer 1

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.setLineDash([5, 3]);/*dashes are 5px and spaces are 3px*/
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

JsFIDDLE

Answer 2

这是创建虚线的更简单方法：

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

ctx.setLineDash([5, 15]);

ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();

希望对您有所帮助。

Answer 3

仅供参考 - 虚线和虚线是一些新的画布功能的一部分 现在在规范中 - 并且已经在 Chrome 中实现（现在 - 2020 年 1 月 - 可能还有其他浏览器）。

Answer 4

您可以使用setLineDash() 方法。

context.setLineDash([2,3]);

http://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.html

Answer 5

在画布上绘制虚线

我提供这个不是作为一个完整的解决方案，而是作为在任意 2 点（任意角度的线）之间绘制虚线的简单方法。它的绘制速度非常快。

您可以修改它以适应虚线的需要。绘制破折号不应明显减慢绘图速度。

这是代码和小提琴：http://jsfiddle.net/m1erickson/pW4De/

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

        DrawDottedLine(300,400,7,7,7,20,"green");

        function DrawDottedLine(x1,y1,x2,y2,dotRadius,dotCount,dotColor){
          var dx=x2-x1;
          var dy=y2-y1;
          var spaceX=dx/(dotCount-1);
          var spaceY=dy/(dotCount-1);
          var newX=x1;
          var newY=y1;
          for (var i=0;i<dotCount;i++){
                  drawDot(newX,newY,dotRadius,dotColor);
                  newX+=spaceX;
                  newY+=spaceY;              
           }
           drawDot(x1,y1,3,"red");
           drawDot(x2,y2,3,"red");
        }
        function drawDot(x,y,dotRadius,dotColor){
            ctx.beginPath();
            ctx.arc(x,y, dotRadius, 0, 2 * Math.PI, false);
            ctx.fillStyle = dotColor;
            ctx.fill();              
        }