キャンバスの勉強No.12(canvasにて描画No.09)

2021.04.26.07:00



 キャンバス内で「開閉もの」のアニメー

 ションを描く処理の第一弾です。

 以前フラッシユ時代にJavaScript変換による

 フラッシュアニメで所謂「開閉もの」のアニ

 メ処理を行った事がありました。今回はその

 開閉もの」をcanvasにより実現させる処理へ

 の挑戦です。



 これは以前sudachiさんが障子の開閉するア

 ニメを描いた時の和室の画像をお借りして作成

 したものです。また、室外の背景に現われる鳥

 達は、sudachiさんがよく投稿されている大阪城

 公園で見られる鳥類の画像を配置しました。

 それぞれの鳥達の名前は分かりますか?

 小生が以前投稿したフラッシュアニメの記事は

ここをクリック


 です。また、sudachiさんが投稿された和室の

 障子の開閉アニメの記事は

ここをクリック


 です。それぞれリンク先をクリックして

 ご覧下さい。

 障子の開閉する和室のアニメーション画像の

 風景をご覧下さい。



キャンバスの勉強No.11(canvasでのお絵かきNo.03)

2021.04.19.07:00







 キャンバス内でお絵かきする第三弾です。

 今回は前回の夜空の風景の改良版です。

 下欄にあるボタン画像を押下する度に夜空に

 それぞれの画像が出現します。

 さて、はてなマークをクリックするとどんな

 画像が現れるでしょうか?





 左端の星のマークは押下する度に星の数が

 増えて行きます。また、左から2番目と3番目

 の彗星のマークを押すとそれぞれ軌跡の付いた

 流れ星が出現します。また2回ずつクリックす

 る事により都合4種類の流星が現れます。

 また月のマークを押下するとどこかに三日月の

 画像が現れる筈です。

 それそれれのボタン押して試してみてご覧下さい。





 夜空に輝く月や星のアニメ画像を

 下欄のボタン押してご覧下さい。



キャンバスの勉強No.10(canvasでのお絵かきNo.02)

2021.04.12.07:00







 キャンバス内でお絵かきする第二弾です。

 今回は簡単な図形から始めます。先ず、小さ

 な星と2種類の流れ星、それに輝く月の形状

 を描き、それぞれをキャンバス内で描きます。

 そして、それぞれを載せる画像枠を異ならせ

 て、背景画像の上にその画像枠を層状に配置

 します。こうする事により、描いたアイテム

 達が一定のエリア内で表示されたり、アニメ

 運動が表現されたりします。







 描いた流れ星はひっきりなしに流れて行き

 ますが、多くの星の数々はこのブログをリロー

 ドする度にその配置位置が異なります。また

 月も浮かぶ位置が刻々変化するのですが、時々

 見えたり、見えなくなったりもします。

 また月や星の透明度をランダムに設定していま

 すので、リロードする度にその輝きも変化しま

 す。一度試してみてご覧下さい。





 夜空に輝く月や星のアニメ画像を

 ご覧下さい。



キャンバスの勉強No.09(canvasにて描画No.08)

2021.04.05.07:00





 前回までのキャンバス内でのパノラマ画

 像の第一弾とキャラクタが歩行するアニメー

 ションを描く処理の第二弾との合作映像です。

 このcanvasのスクリプトはひとつのhtml文の

 中に複数個配置出来ます。またcanvasで

 描画する画像やキャラクタは透過型の背景

 の上に描出されます。従って、同一の画像

 枠の上に複数の画像やキャラクタを層状に

 配置しても、それぞれ合成されて一枚の画



 像として表現する事が出来ます。





 これはフラッシユ時代に金木犀さんがよく

 なされていたwebコンテンツ作りと似ています。

 即ちフラッシュのswfファイルをembedタグで

 配置する際wmodeの属性でtransparentを指定

 して、cssのz-indexを使用してpng画像やgif

 アニメ画像を同一の画像枠の上に配置する事

 により、あたかも一枚の絵画のように合成し

 た画像として出力されるものです。

 このようにこれまでのflashで出来ていた画像



 処理を順次canvasにより置き換えられるように

 勉強して行く次第です。





 昭和記念公園内の広場のパノラマ画像

 とキャラクタの歩行アニメの合成画像です。



プロフィール

chappychan2

Author:chappychan2
FC2ブログへようこそ!

最新記事
最新コメント
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR