topimage

2017-08

スポンサーサイト - --.--.-- --

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

jsdo.itでJavascriptのCanvas練習してみました - 2011.07.31 Sun

かなり前から少しづつ続けていた、jsdo.itに投稿しながらのJavascriptのCanvas練習についてのまとめです。 結論、Canvasムズイです。。。

以下リストとなります。

まずは、Canvasと関係ありませんが記念すべき?jsdo.it初投稿プログラムです。 ただのよくある「Hello World」ですが。。。 
js on 2010-6-19

ここからがCavans練習コードとなります。

はじめてのCanvasといった感じでまず以下の2コードを作成
1、canvasで文字表示
上記のHello Worldとは違い、Canvasを使い色を変えながら「Hello World」文字列を表示しています。
2、canvasで矩形領域ぬりつぶし
コードのタイトルのとおり矩形領域を色を変えながら塗りつぶしています。 関係ないですが、なんで長方形っていわずに矩形って言うのでしょう?

次に作業した以下のコードは最初は動いていましたが、その後仕様がかわって外部の画像が取り込めなくなったのか、動かなくなってしまったものです。 今もコードと画像ファイルを置く環境を同じにすれば動くかもしれません(試してませんが。。。)。
1、canvasで画像の組み込み
2、canvasで↑↓←→ボタンで組み込み画像の移動
3、canvasに画像を取り込めなくなった。。。

で、画像が読み込めなくなってしまったので、かわりに矩形領域を描画させていろいろ操作できるようにしたコードです(Firefoxで動きます)。
1、canvasで↑↓←→ボタンで矩形領域の移動
2、canvasでloopで繰り返し矩形領域ぬりつぶし
3、canvas上の移動する矩形領域の当たり判定

その後Base64形式で画像を取り込めることを知ったので、改めてBase64形式で画像を取り込んで操作できるようにコーディングしたものです(Dropboxに置いた画像ファイルが取り込めるらしいことは最近知りました。。。)。 Chromeブラウザのことを意識していなかったのでFirefoxブラウザでの動作確認がメインのコーディングとなります(IEは今も意識してません。。。)。
1、HTMLでbase64形式画像の表示
2、JavaScriptでbase64形式画像の表示
3、動かない。。。 作業用に保存
4、↑↓←→ボタンでcanvas上のbase64形式画像の移動
5、canvas上の2つのbase64画像をゲーム的?loopで表示
6、前回ソースからChromeでも動くように変更(「前回ソース」は4のソースのことです)
↑この最後のコードのみChrome対応です。

以上のようにCanvasを使って基礎的なものをいろいろ試してみましたが、それだけでもう自分にはいろいろとムズイです。。。 

このあと、上記コーディング作業の延長としてもう少しCanvasでの作業を続けてみました。 それについては次のブログエントリに載せる予定です。
スポンサーサイト

● COMMENT ●


管理者にだけ表示を許可する

トラックバック

http://oretaikan.blog20.fc2.com/tb.php/336-5eb67c39
この記事にトラックバックする(FC2ブログユーザー)

jsdo.itでJavascriptのCanvas練習してみました2 «  | BLOG TOP |  » WonderflからFacebookへのうさんくさい投稿機能実験

FC2カウンター

ブログ内検索

プロフィール

siouxcitizen

カレンダー

07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

カテゴリー

RSSフィード

リンク

このブログをリンクに追加する

スポンサーリンク

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