scale()メソッド

CanvasRenderingContext2D scale()メソッド

概要

 状態:-  閲覧数:564  投稿日:2016-08-23  更新日:2016-09-02  
HTML5 canvas
・CanvasRenderingContext2Dオブジェクトのメソッド
※CSS3のtransform:scale()とは異なる

内容
・指定内容の伸縮変形を適用して、変換マトリックスを変更
・キャンバス単位で、「水平方向x」かつ「垂直方向y」へ、「スケーリング変換」を追加

変換マトリックス
・図形やパスが生成される際、座標に適用される

構文
void ctx.scale(x, y);

引数
x
・水平方向のスケーリング係数
・水平方向の伸縮係数
y
・垂直方向のスケーリング係数
・垂直方向の伸縮係数




「オリジナルサイズ」に対するスケールではなく、「現状のサイズ」に対するスケール

 閲覧数:272 投稿日:2016-09-02 更新日:2016-09-09 

当初比スケール2倍


var cs = document.getElementById('canvas要素id名');
var ctx = cs.getContext('2d');

ctx.scale(2, 2);
この時点の当初比スケール
・2倍


当初比スケール4倍


var cs = document.getElementById('canvas要素id名');
var ctx = cs.getContext('2d');

ctx.scale(2, 2);
ctx.scale(2, 2);
この時点の当初比スケール
・4倍


当初比スケール2倍


var cs = document.getElementById('canvas要素id名');
var ctx = cs.getContext('2d');

ctx.scale(2, 2);
ctx.scale(1, 1);
この時点の当初比スケール
・2倍


オリジナルのスケールへ戻す


scaleに逆数を指定
1.当初比スケール2倍
2.当初比スケール1/2倍
var cs = document.getElementById('canvas要素id名');
var ctx = cs.getContext('2d');

ctx.scale(2, 2);
ctx.scale(1/2, 1/2);

問題点
・scaleに逆数を指定すれば当初スケールに戻るが、計算結果が端数になった場合、戻らない可能性がある

saveメソッドとrestoreメソッドを使用して、オリジナルのスケールへ戻す

 閲覧数:277 投稿日:2016-09-08 更新日:2016-09-16 

スケールを変更する前の状態をsave


scale設定値を保存
1.現在のscale設定値(1倍)を保存
2.当初比スケール2倍へ変更
3.保存したscale設定値読込
→ 当初比スケール1倍
var cs = document.getElementById('canvas要素id名');
var ctx = cs.getContext('2d');

ctx.save()
ctx.scale(2, 2);
ctx.restore();





コード例

 閲覧数:229 投稿日:2016-09-16 更新日:2016-09-16 
var cs=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);








CanvasRenderingContext2D.scale()
scale() メソッド
HTML5 canvas scale Method




仕様


The scale(xy) method must add the scaling transformation described by the arguments to the transformation matrix. The x argument represents the scale factor in the horizontal direction and the y argument represents the scale factor in the vertical direction. The factors are multiples.
HTML Canvas 2D Context


コメント投稿(ログインが必要)