私はキャンバスにトリミングを行うに使命を帯びていると私はすべてのロジックを終了していますが、同様にトリミング領域を選択しながら、1つの要件はまだ破線の四角形を描画するために、すなわち終了したとされていますキャンバスに破線の四角形を描く方法は?
strokeRect(x, y, width, height)
どのようにすることができます破線の四角形を描きますか?
私はキャンバスにトリミングを行うに使命を帯びていると私はすべてのロジックを終了していますが、同様にトリミング領域を選択しながら、1つの要件はまだ破線の四角形を描画するために、すなわち終了したとされていますキャンバスに破線の四角形を描く方法は?
strokeRect(x, y, width, height)
どのようにすることができます破線の四角形を描きますか?
あり、破線のための機能が内蔵されますが、ここではカスタムJSのプロトタイプを使用した例ですだいいえ:
は参照してください: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;
}
}
}
これは、キャンバス仕様に追加されましたすべてのブラウザがまだそれを実装しているわけではありませんが、ここはそうです。
context.setLineDash([6]);
context.strokeRect(0, 0, 50, 50);
ありますか?これをサポートしていないブラウザの回避策? – BrightIntelDusk
ええ、あなたは確かにjavascriptでpolyfillを実装することができます。 user319198の回答が有効でしょうか? –
これは受け入れられる回答でなければなりません –
これは簡単ではありません。参照:http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas – RSG
この質問をご覧ください:http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas – techfoobar