キャンバスの描画をズームする方法

キャンバスの描画を拡大または縮小しようとしていますが、コンテキストの縮尺を変更しても何も起こりません。

スケールの後に再描画する必要がありますか？ズームインまたはズームアウトしようとするたびにコンテキストを描画せずにコンテキストを直接拡大縮小する方法はありますか？キャンバスの描画をズームする方法

PS：スクリプトで制御されているHTML5 <input type="range">でズームインしてズームアウトしたいと考えています。これはすでに動作しています。

2016-10-04 dMar

はい、毎回それを再描画する必要があります。これを回避する方法はありません。これは実際には良いことです。なぜなら、毎回再描画せずにキャンバス上でたくさんの変換を実行できるからです。そうした場合、高輝度のゲームやアニメーションは不可能です。 –

いいえ、毎回それを再描画する必要はありません。幅と高さの属性だけを残して、CSSを使用して全体を拡大/縮小します。 –

このように：https://jsfiddle.net/43ejq0op/ –

。 cssでズームインすることは解決策ですが、品質に大きな損失があります。

2016-10-27 06:08:40 dMar

私は別のquestion I already answered todayから私の答えをコピーしています。..

キャンバスは画像のようなものです。それは独自の物理的な次元を持っていますが、それでもCSSで拡大縮小できます。 widthとheight属性を使用して物理的な寸法を設定し、CSSを使用してそれを縮尺して%〜 ~~に調整してください。~~ ズームしてください。

例...

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.rect(20, 20, 150, 100); 
 
ctx.stroke();

<canvas id="myCanvas" width="300" height="150" style="width:100%;"></canvas>

ここでは、過度に単純化した例です。マイクは最良の解決策は、それを再描画することで、言ったようにhttps://jsfiddle.net/43ejq0op/

2016-10-04 17:50:09

これは動作しますが、あなたの例でわかるように、醜いピクセル化につながります。それが問題でなければ、それは素晴らしい解決策です。さもなければ、OPは全体のシーン（または少なくともスケールされたサブセット）を再描画する必要があります。 –

答えて