在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