如何在画布上绘制虚线矩形？

我负责做帆布剪裁和我与所有的逻辑完成，但一个要求是尚未完成，即画出一个虚线框，而选择裁剪区域，如：如何在画布上绘制虚线矩形？

strokeRect(x, y, width, height)

我怎样才能画一个虚线的矩形？

来源

2011-12-30 user1070642

这并不简单。请参阅：http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas – RSG 2011-12-30 08:28:37

看看这个问题：http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas – techfoobar 2011-12-30 08:32:16

有没有在功能上没有专为虚线，但在这里我们用自定义JS原型的例子：

HTML5 Canvas and Dashed Lines

来源

2011-12-30 08:30:04 kleezy

参见：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; 
     } 
     } 
    }

来源

2011-12-30 08:35:54

这已被添加到画布规范，并非所有的浏览器都已经实现了它，但在这里。

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

来源

2013-12-13 03:41:15

Is there针对不支持此功能的浏览器的解决方法？ – BrightIntelDusk 2014-03-18 16:24:40

是的，你当然可以在JavaScript中实现一个polyfill。 user319198的答案可能有效？ – 2014-03-19 17:41:03

这应该是被接受的答案 – 2017-09-14 19:29:18

如何在画布上绘制虚线矩形？

回答

相关问题