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

2021.06.28.07:00



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

 前回のまここまさんの基本のsvg画像から歩行

 するパターンのsvg画像を作成してみました。

 以下の8枚のサムネイル画像をクリックして

 svgファイルを取り込んで下さい。

 その下の歩行アニメは9VAeで作成したもので

 す。これらを利用して背景画像などを配置して

 まここまさんが歩くアニメーションを作成して

 下さい。

 



 このsvgファイルはテキスト形式なので1枚

 の画像でも約100Kb位しかありません。しかも

 これらの8枚のsvgファイルを9VAeのキャンバス

 内に取り込んで画像展開して、最後にアニメgif

 出力しても約360Kb程度にしかなりません。

 従って、相当多くのsvgファイルを配置しても

 約1Mb位にしかならないでしょう。

 そこで後はファイル容量の大きいイメージ画像

 等を背景として配置する際に、FC2ブログの制

 限容量内に収まるように工夫すれば、十分FC2

 ブログ内には収納できるのではないでしょうか。

 動画形式のmp4ファイルに変換してYouTube等に

 アップロードするのも良いですが、このアニメ

 gifはJavaScriptで色々と直接制御出来るので

 web上で画像編集するのに便利なものです。

mako01mako02mako03mako04
まこ01 まこ02 まこ03 まこ04
まここまさんの各サムネイル
画像をクリックして下さい。
mako05mako06mako07mako08
まこ05 まこ06 まこ07 まこ08
まここま

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

2021.06.21.07:00



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

 はここで一旦休止とします。次に愈々キャンバ

 ス内でキャラクタ等の人物画像のお絵かきにつ

 いて勉強して行きたいと思います。これまで人

 物画像については、イメージ画像を取り込んで

 JavaScriptで表現して来ました。しかし、キャ

 ンバス要素には色々な図形を描く道具がありま

 す。これを利用して直接キャラクタ画像を描写

 する事も出来ます。然しながら、これでは画像

 の輪郭を示す多くのパスの座標位置を細かく指

 定して行かなくてはなりません。これでは非常

 効率が悪いので別の方法を考えました。



 このキャンバスにはpng画像のようなイメー

 ジ画像の他にsvgファイルも処理する事が出来

 ます。このsvgファイルはParaDrawで作るpdr

 ファイルと同じベクター画像で保存され、しか

 もテキスト形式で記述されています。

 このsvgファイルを制作する画像ソフトは色々

 あります。そこで作成したsvgファイルをFC2ブ

 ログにアップロードしたいのですが、このsvgの

 拡張子を持つファイルは許可されていません。

 仕方がないので、色々と思案した結果、FC2の

 ホームページの方にはアップロード出来るので

 FC2のホームページ上でキャンバスを作成し、そ

 の中でsvgファイルを描画処理するJavaScriptを

 記述する事にしました。



 このsvgファイルはまここまさんたちが利用

 している9VAe(きゅうべえ)の入力ファイルと

 しても使用する事が出来ます。従って、以下の

 リンク先から現れるまここまさんの画像をマウ

 スの右クリックでsvg形式のファイルにてダウン

 ロードして下さい。画像はA4形式サイズで描画

 されていますが、9VAeを立ち上げてこのまま開

 いて下さい。まここまさんの画像が表示され、

 その各部品がばらばらに格納されているので、

 各部品を自由に動かしてみて顔の表情や手足の

 動作のアニメ処理を施してみて下さい。

ここをクリック


 して下さい。また、次はこのまここまさん

 のsvg画像を取り込んでFC2のホームページ上

 でキャンバス内で表現したものです。ここで

 で注意すべき事は、以下のリンク先をIEで開

 いた場合最初は画像が表示されるのですが、

 その画面をリロードすると何故か画像が消え

 てしまうのです。その理由は分かりませんが

 不思議な事です。

 従って、EdgeかGoogle Chromeか又はFireFox

 等のブラウザで開いて下さい。まここまさん

 の歩く姿の基本画像が現れます。この図を利用

 して、これからまここまさんの歩行パターンを

 描いて行く積もりです。それでは

ここをクリック


 して下さい。

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

2021.06.14.07:00



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

 画像を描く処理の第八弾です。

 前回に引き続きさっちゃんの障子の「開閉もの」

 のアニメ画像の最終段階です。

 いよいよ雨降りの後の虹の出現のスクリプトで

 す。然しながら、ここのアニメ処理が上手く行

 かないのです。実際、どの点で困っているかご

 説明しましょう。



 下欄に示す2つの画像の内、上段の画像は

 虹の出現だけを取り上げたものです。ここで

 は虹出現と虹消滅の2つのボタンがあります。

 先ず初め虹出現ボタンを押すと暫くして虹が

 ゆっくり現われ次第に濃くなって行きます。

 次に一旦このサイトをリロードして、虹消滅

 ボタンを押すと暫くして虹が突然現れ次第に

 薄くなって消えて行きます。

 然しながら、最初の虹出現ボタンを押して虹

 が出現してから虹消滅ボタンを押しても正常

 に虹が次第に消滅して行かないのです。

 この逆の虹消滅ボタンを押してから虹出現ボ

 タンを押しても同様なのです。

 ここが何とも不可解な処なのです。



 次に下段の画像は、以前の雨降りの画像と

 虹の出現画像とを合わせたものです。ここで

 も最初に雨へのボタンを押すとアジサイに降

 る雨の画像が現れます。次に一旦リロードし

 てから晴へのボタンを押すと暫くして虹がゆっ

 くり現れ、濃くなってから次第に薄くなって

 やがて消えて行きます。

 然しながら、ここでも雨へのボタンを押して

 から晴へのボタンを押すと青空に雨降りの画

 像が出現してやがて虹が現れ次第に消滅して

 行く画像に変わるのです。

 これは、JavaScriptのsetIntervalで制御して

 いるタイマー処理をclearIntervalで正常にタ

 イマーを止めてくれなくて、前のアニメ運動

 が残ってしまうからだと思います。



 「虹出現」のボタンを押すと暫くして虹が

 現れます。また、「虹消滅」のボタンを押すと

 やがて虹が現れ、次第に消えて行きます。



 「雨へ」のボタンを押すとアジサイに

 降る雨の画像が現れます。また、「晴へ」

 のボタンを押すと暫くして虹が現れ、次第に

 消えて行きます。

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

2021.06.07.07:00



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

 ン画像を描く処理の第七弾です。

 前回のさっちゃんの障子の「開閉もの」のアニ

 メ画像の右側にあるアニメ処理の追加版です。

 ここでは雨降りの様子と雨上がり後の虹の出現

 がスクリプトで用意されていました。

 然しながら、ここでも2つの処理を連続して行

 う事が出来ませんでした。仕方がないので、雨

 降りの様子だけをキャンバス内で描きました。



 これは、JavaScriptで使用するsetInterval

 のタイマー処理を止めるのにclearIntervalと

 云うものがあるのですが、これが上手く機能

 してくれないからです。

 これについてもう少し勉強しようと思いますが、

 中々難しくて手強いです。

 ここでは「雨へ」と云うボタンだけが有効です。

 クリックしてご覧下さい。



 「雨へ」のボタンを押すとアジサイに

 降りかかる雨のシーンが現れます。

プロフィール

chappychan2

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

最新記事
最新コメント
月別アーカイブ
カテゴリ
パノラマ画像 (1)
フラッシュ動画「アハ問題」 (1)
フラッシュの課題 (95)
キャンバスの勉強 (27)
Video画像 (3)
未分類 (0)
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR