HTML canvas scale()メソッド

Canvas 对象参考手册Canvas オブジェクト

例

長方形を描画し、200%に拡大して、再び長方形を描画します：

YourbrowserdoesnotsupporttheHTML5canvastag.

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);

試してみる »

ブラウザサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari は scale() メソッドをサポートしています。

注意：Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。

定義と使い方

scale() メソッドは現在の描画を拡大または縮小します。

注意：描画を拡大縮小すると、その後のすべての描画も拡大縮小されます。位置も拡大縮小されます。scale(2,2) を指定すると、描画はキャンバスの左上隅から2倍遠い位置に配置されます。

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

パラメータ値

パラメータ 説明
scalewidth 現在の描画の幅を拡大縮小します（1=100%、0.5=50%、2=200%、以下同様）。
scaleheight 現在の描画の高さを拡大縮小します（1=100%、0.5=50%、2=200%、以下同様）。

实例

その他の例

例

長方形を描画します。200%に拡大し、再び長方形を描画します。200%に拡大し、再び長方形を描画します。200%に拡大し、再び長方形を描画します：

YourbrowserdoesnotsupporttheHTMLcanvastag.

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);

試してみる »

Canvas 对象参考手册Canvas オブジェクト

その他の拡張