Làm cách nào để vẽ hình chữ nhật có đường nét đứt trong canvas?

Question

Tôi được giao nhiệm vụ để làm cắt xén trong vải và tôi kết thúc với tất cả các logic nhưng một yêu cầu vẫn chưa được hoàn thành ví dụ để vẽ một hình chữ nhật tiêu tan khi lựa chọn cắt xén diện tích như:

strokeRect(x, y, width, height) 

Làm thế nào tôi có thể vẽ một hình chữ nhật đứt quãng?

Answer 1

Không xây dựng trong chức năng cho đường đứt nét, nhưng đây là một ví dụ sử dụng một nguyên mẫu tùy chỉnh JS:

HTML5 Canvas and Dashed Lines

Answer 2

Tham khảo: dotted stroke in <canvas>

var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype; 
    if (CP && CP.lineTo){ 
     CP.dashedLine = function(x,y,x2,y2,dashArray){ 
     if (!dashArray) dashArray=[10,5]; 
     var dashCount = dashArray.length; 
     this.moveTo(x, y); 
     var dx = (x2-x), dy = (y2-y); 
     var slope = dy/dx; 
     var distRemaining = Math.sqrt(dx*dx + dy*dy); 
     var dashIndex=0, draw=true; 
     while (distRemaining>=0.1){ 
      var dashLength = dashArray[dashIndex++%dashCount]; 
      if (dashLength > distRemaining) dashLength = distRemaining; 
      var xStep = Math.sqrt(dashLength*dashLength/(1 + slope*slope)); 
      x += xStep 
      y += slope*xStep; 
      this[draw ? 'lineTo' : 'moveTo'](x,y); 
      distRemaining -= dashLength; 
      draw = !draw; 
     } 
     } 
    } 

Answer 3

này đã được thêm vào spec vải , không phải tất cả các trình duyệt đều đã triển khai, nhưng ở đây.

context.setLineDash([6]); 
context.strokeRect(0, 0, 50, 50);