Canvas scale() メソッド
定義と使用法
scale() 方法を使用して現在の描画を拡大または縮小します。
注記：描画を拡大すると、その後のすべての描画も拡大されます。位置も拡大されます。もし scale(2,2)それでは、描画はキャンバスの左上隅から2倍の位置に配置されます。
例
例1
矩形を描画；200%に拡大して矩形を再描画：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ヒント：ページの下部にさらに多くの例があります。
構文
context.scale(scalewidth,scaleheight);
パラメータの値
| パラメータ | 説明 |
|---|---|
| scalewidth | 現在の描画の幅を拡大（1=100%、0.5=50%、2=200%、など）。 |
| scaleheight | 現在の描画の高さを拡大（1=100%、0.5=50%、2=200%、など）。 |
さらに多くの例
例2
矩形を描画；200%に拡大して矩形を再描画；200%に拡大して矩形を再描画；200%に拡大して矩形を再描画：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ブラウザのサポート
このテーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注記：Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。
