Как нарисовать прямоугольник из пунктирной линии на холсте?

Question

Мне поручено выполнять обрезку на холсте, и я закончил со всей логикой, но одно требование еще не выполнено, то есть нарисовать пунктирный прямоугольник при выборе области обрезки, например:

strokeRect(x, y, width, height)

Как нарисовать пунктирный прямоугольник?

Answer 1

Это было добавлено к спецификации canvas, еще не все браузеры его реализовали, но вот оно.

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

Answer 2

Нет встроенной функциональности для пунктирных линий, но вот пример использования собственного прототипа JS:

HTML5 Холст и пунктирные линии

Answer 3

См .: пунктирный ход в

 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;
        }
      }
    }