在HTML5画布上绘制虚线？

Question

我想在HTML5画布上画一些虚线。但我找不到有这样的功能。画布路径只能绘制实线。人们试图在CSS中使用一些边框特征（虚线，虚线）来绘制虚线，但它们只能是水平或垂直的。所以我陷入了这个问题。我还找到一个名为RGraph的图书馆，它可以绘制虚线。但使用外部库会使绘图非常慢。那么任何机构都有一个想法如何实现这一点？任何帮助将不胜感激。

Answer 1

绘图虚线上帆布

线I提供这种向上不作为一个完整的解决方案，但作为简单的方法来绘制任意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();    
     } 

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, 3]);/*dashes are 5px and spaces are 3px*/ 
ctx.beginPath(); 
ctx.moveTo(0,100); 
ctx.lineTo(400, 100); 
ctx.stroke(); 

JsFIDDLE

Answer 4

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

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 5

您可以使用setLineDash()方法。

context.setLineDash([2,3]); 

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