[HTML5 Canvas]変形メソッド scale(),rotate(),translate() の実行順序 HTML5のCanvasには、scale(),rotate(),translate() という変形用メソッドがあり、それぞれ 伸縮、回転、移動 を行う。 (それ以外の変形用メソッドとして、汎用メソッドtransform()がある) 期待した図形を作成するための、変形用メソッド実行順序について解説する。 1. 変形の順序が変わればできる図形も変わる 図形を変形させる場合、順序に注意する必要がある。 例えば、長方形に 座標(0,0)を中心として時計回りに30度回転 → x軸方向に20, y軸方向に10移動 → x軸方向に2倍, y軸方向に1.5倍する という変形を行うと、以下のように変形していく。図形左上の×印は座標(0,0)を示す。 逆順に、 x軸方向に2倍, y軸方向に1.5倍