トップページ

このブログについて

全記事一覧(新着順)

テーマ別記事案内

短期間ゲーム制作講座


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

canvasの中心で図形を回転させながら重ねて描画する方法メモ【translateとrotate】

20140901.png



キャンバスを回転させるのにrotateというメソッドがあります。
そしてtmlibでもほとんどjavascriptの標準と変わらない感じで扱えるようです。

   キャンバス.rotate(角度 * Math.PI / 180);

ただしこれは左上を原点として回転するので、
今回やりたかった図形を真ん中に回転させて重ねて描画する方法に四苦八苦しました。





まず真ん中らへんに赤いのを描画。
例えばこれに逆三角形を重ねて六芒星を描きたいとします。

   キャンバス.rotate(180 * Math.PI / 180);

こうしたあとさらに描画すればできそうな予感がしたのでやってみました。すると……





まさかの何も変化が見られない。
今度は45度で試してみました。





はい、なんとなく左上が原点というのも納得な気がしてきました。



色々探したところ、こちらのブログ様の記事のお陰で解決しました。

 canvas.drawImagで貼り付ける画像を回転させる



rotateの前後にtranslateをかませればいいようです。
translateの意味は良くわかりませんが、こちらを読むに原点を移動させてる?っぽいです。

ということでこんな風にしてみます。

   キャンバス.translate( キャンバス横幅の半分, キャンバス縦幅の半分 );
   キャンバス.rotate(180 * Math.PI / 180);
   キャンバス.translate( キャンバス横幅の半分*-1, キャンバス縦幅の半分*-1 );





できたー!

そしてこれを




こんな風に利用する予定です。
(リロードの度に違う図形に変わります)


以前のこれよりはちょっぴり軽い、はず。



関連記事
このエントリーをはてなブックマークに追加

コメント

コメントの投稿

非公開コメント


LINEスタンプ

LINEスタンプ承認されました

スポンサーリンク

このブログについて


★全記事一覧★

人気記事

人気ブログランキング



おかげ様で1位なことがあります。
ありがとうございます!

良い感じのペンタブ



Intuoscomicを使用しています 使い易いです。
替え芯やCLIP STUDIO、Pixiaなど絵を描く専用のソフトも数種付属しています。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。