HTML canvas scale() メソッド

例

四角形を描画し、スケールを 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);

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、メソッドを完全にサポートした最初のブラウザ・バージョンを指定しています。

メソッド
scale()	Yes	9.0	Yes	Yes	Yes

定義と用法

scale() メソッドは、現在の図形を大きくしたり、小さくしたりします。

注: 図形をスケーリングすると、将来の図形もすべてスケーリングされます。位置もスケーリングされます。 scale(2,2) の場合；図形は、キャンバスの左と上から指定した位置の 2 倍離れたところに配置されます。

JavaScript 構文：	context.scale(scalewidth,scaleheight);

パラメータの値

パラメータ	説明	Play it
scalewidth	現在の図形の幅を拡大縮小する (1=100%, 0.5=50%, 2=200%,等)	Play it ❯
scaleheight	現在の図形の高さを拡大縮小する (1=100%, 0.5=50%, 2=200%,等)	Play it ❯

その他の例

例

四角形を描画し、スケールを 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);

Try it Yourself ❯

HTML Canvas リファレンス