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

Question

我被指派在画布(canvas)上进行裁剪操作，我已经完成了所有的逻辑，但有一个要求尚未完成，即在选择裁剪区域时绘制一个虚线矩形，如下所示：

strokeRect(x, y, width, height)

我该如何绘制虚线矩形？

- user1070642

---

这并不是一件简单的事情。请参考：https://dev59.com/bm455IYBdhLWcg3wCPjh - RSG

看看这个问题：https://dev59.com/bm455IYBdhLWcg3wCPjh - techfoobar

Answer 1

这已经被添加到了画布规范中，不是所有的浏览器都已经实现了它，但是在这里呈现出来。

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

- Paul Milham

---

是的，你肯定可以在JavaScript中实现一个polyfill。user319198的答案可能有效吗？ - Paul Milham

Answer 2

没有内置的虚线功能，但是这里有一个使用自定义JS原型的示例：

HTML5画布和虚线

- Clay Garrett

Answer 3

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

- user319198