HTML canvas 要素の scale()メソッドの使い方

HTML の 要素には scale() と呼ばれるメソッドがあり、描画コンテキスト内の内容を拡大縮小します. scale() メソッドを使用する例を以下に示します.

const canvas = document.getElementById('myCanvas');

const ctx = canvas.getContext(‘2d’);

// 设置缩放比例

ctx.scale(scaleX, scaleY);

// 绘制矩形

ctx.fillRect(x, y, width, height);

このコードでは、まず 要素とコンテキストオブジェクト ctx を取得します。次に、scale(scaleX, scaleY) メソッドを呼び出して拡大縮小の倍率を設定します。ここで、scaleX パラメーターと scaleY パラメーターは、それぞれ水平方向と垂直方向の拡大縮小の倍率を表します。

次に拡大したコンテキストにfillRect(x, y, width, height)などの描画メソッドを用いることで描画処理が可能です。これらのメソッドの引数は通常の描画処理時と変わりませんが、事前に設定した拡大率に合わせて調整されます。

ズーム倍率が1の場合、拡大縮小を行わないことに注意してください。1より小さい値は図を小さくします。例えば、0.5は図を半分に縮小します。1より大きい値は図を大きくします。例えば、2は図を2倍に拡大します。

描画操作を実行する前に、必ずズームレベルの設定を行ってください。それを行わないと、予期しない結果が発生する可能性があります。