HTMLキャンバス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> 要素をサポートしていません。
