scale()メソッド

CanvasRenderingContext2D ＞ scale()メソッド

概要

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

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

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

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

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




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

　閲覧数:408　投稿日: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メソッドを使用して、オリジナルのスケールへ戻す

　閲覧数:463　投稿日: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();





コード例

　閲覧数:357　投稿日: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(x, y) 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

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



類似度ページランキング
順位 ページタイトル抜粋 ％
1 scale()メソッド 100
2 clear()メソッド 91
3 save()メソッド 86
4 arc()メソッド 80
5 clearRect()メソッド 77
6 rect()メソッド 76
7 translate() メソッド 74
8 clearColor()メソッド 74
9 clearDepth()メソッド 74
10 fillRect()メソッド 72
11 lineTo()メソッド 70
12 shaderSource()メソッド 69
13 setItem()メソッド 67
14 stroke() メソッド 67
15 fill()メソッド 67
16 compileShader()メソッド 67
17 strokeRect() メソッド 64
18 fillText()メソッド 64
19 setTransform()メソッド 62
20 createBuffer()メソッド 62
2025/2/05 12:59 更新
週間人気ページランキング ／ 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 clearRect()メソッド | CanvasRenderingContext2D 2
1 moveTo()メソッド(CanvasRenderingContext2D ) カテゴリー 2
1 fillStyleプロパティ(CanvasRenderingContext2D ) カテゴリー 2
2 globalCompositeOperationプロパティ | CanvasRenderingContext2D 1
2 Web Storage | その他 1
2 strokeStyleプロパティ(CanvasRenderingContext2D ) カテゴリー 1
2 WebGLShader 1
2 setItem()メソッド | HTMLStorageオブジェクト 1
2 createShader()メソッド(WebGLRenderingContext) カテゴリー 1
2 compileShader()メソッド | WebGLRenderingContext 1
2 drawArrays()メソッド(WebGLRenderingContext) カテゴリー 1
2 compileShader()メソッド(WebGLRenderingContext) カテゴリー 1
2 遭遇例 ／ 確認例 1
2 shaderSource()メソッド | WebGLRenderingContext 1
2 transform()メソッド(CanvasRenderingContext2D ) カテゴリー 1
2 fillText()メソッド(CanvasRenderingContext2D ) カテゴリー 1
2 ピクセル | 色 1
2 RGBA | 色 1
2 ImageDataオブジェクト | HTMLCanvasElement 1
2 strokeRect() メソッド | CanvasRenderingContext2D 1
2025/2/5 1:02 更新