Vẽ các đường nét đứt trên Canvas HTML5?

Question

Tôi muốn vẽ một số đường nét đứt trên canvas HTML5. Nhưng tôi không thể tìm thấy có một tính năng như vậy. đường dẫn canvas chỉ có thể vẽ các đường liền nét. Và mọi người đã cố gắng sử dụng một số tính năng biên giới (chấm, gạch ngang) trong CSS để vẽ các đường đứt nét, nhưng chúng chỉ có thể nằm ngang hoặc dọc. Vì vậy, tôi đã bị mắc kẹt về điều này. Tôi cũng tìm thấy một thư viện có tên là RGraph và nó có thể vẽ các đường đứt nét. Nhưng sử dụng một thư viện bên ngoài sẽ làm cho bản vẽ thực sự chậm. Vậy cơ thể nào cũng có ý tưởng làm thế nào để thực hiện điều này? Bất kỳ trợ giúp sẽ được đánh giá cao.

Answer 1

Vẽ nét đứt trên vải

tôi cung cấp này lên không như một giải pháp hoàn chỉnh, nhưng là một cách đơn giản để vẽ một đường nét đứt giữa bất kỳ 2 điểm (một dòng ở bất kỳ góc). Nó rút ra rất nhanh.

Bạn có thể sửa đổi nó để phù hợp với nhu cầu của một đường đứt nét. Vẽ dấu gạch ngang không nên làm chậm bản vẽ.

Đây là mã và một Fiddle: 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

FYI - chấm và đứt nét là một phần của một số tính năng vải mới mà bây giờ là trong spec - và đã được thực hiện trong 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

Đây là một cách dễ dàng hơn để tạo đường đứt nét:

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

Hy vọng rằng sẽ giúp.

Answer 5

Bạn có thể sử dụng phương thức setLineDash().

context.setLineDash([2,3]); 

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