最新のWeb開発のチュートリアル
 

HTML canvas scale() Method

<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);
»それを自分で試してみてください

ブラウザのサポート

表中の数字は完全に方法をサポートする最初のブラウザのバージョンを指定します。

方法
scale() 4.0 9.0 3.6 4.0 10.1

定義と使用法

scale()メソッドは、現在の図面、より大きな又はより小さなスケール。

Note:あなたが図面を拡大した場合、将来のすべての図面も縮小されます。 ポジショニングも縮小されます。 あなたは場合はscale(2,2) 。 図面は二回限りキャンバスの左と上から指定したとして配置されます。

JavaScriptシンタックス: contextscale( scalewidth,scaleheight )

パラメータ値

パラメーター 説明 それを再生します
scalewidth 現在の図面の幅をスケール(1=100%, 0.5=50%, 2=200%, etc.) それを再生します»
scaleheight 現在の図面の高さをスケール(1=100%, 0.5=50%, 2=200%, etc.) それを再生します»

例

その他の例

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オブジェクト