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

仅供参考 - 虚线和虚线是一些新的画布功能的一部分现在已经在规范中 - 并已在Chrome中实现：

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

Answer 3

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

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 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();              
        }

在HTML5 Canvas上绘制虚线？

5 个答案: