2011-12-30 30 views
5

私はキャンバスにトリミングを行うに使命を帯びていると私はすべてのロジックを終了していますが、同様にトリミング領域を選択しながら、1つの要件はまだ破線の四角形を描画するために、すなわち終了したとされていますキャンバスに破線の四角形を描く方法は?

strokeRect(x, y, width, height) 

どのようにすることができます破線の四角形を描きますか?

+0

これは簡単ではありません。参照:http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas – RSG

+0

この質問をご覧ください:http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas – techfoobar

答えて

2

あり、破線のための機能が内蔵されますが、ここではカスタムJSのプロトタイプを使用した例ですだいいえ:

HTML5 Canvas and Dashed Lines

1

は参照してください: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; 
     } 
     } 
    } 
10

これは、キャンバス仕様に追加されましたすべてのブラウザがまだそれを実装しているわけではありませんが、ここはそうです。

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

ありますか?これをサポートしていないブラウザの回避策? – BrightIntelDusk

+1

ええ、あなたは確かにjavascriptでpolyfillを実装することができます。 user319198の回答が有効でしょうか? –

+0

これは受け入れられる回答でなければなりません –

関連する問題