2011年05月31日

HTML5でcanvasを使う

マウスで描画にボタンで図形描画とクリアーを追加してみました。

四角部分をドラッグしてお絵かき。

下にあるボタンを押して、図形描画。

CLEARボタンで、全部消えます。

CANVASにクリアーが無いようなので、新規に四角の枠を書き白で塗りつぶしました。


posted by hirano at 19:17| 埼玉 ☀| Comment(1) | TrackBack(0) | HTML5 | このブログの読者になる | 更新情報をチェックする

2011年05月30日

HTML5でお絵かきと、ブログにembed

日経ソフトウエアの6月号から、HTML5の入門講座が始まりました。

HTML5というとなんといっても、キャンバスです。

HTMLというと、Hiper Text・・というくらいですから、本来はテキストなのでキャンバスというのは、

え!、絵!

というくらい、そぐわないキーワードです。

そして、このキャンバスによって、今までならHTMLの中に絵を入れるには、GIFとか、JPEGなどの画像を貼り付けたり、JAVAなどで作成した画像をオンデマンドで貼り付けるといったことをしていたのに、なんと直接HTML5の中で、絵を作ることができるのです。

その例として、6月号、第2回目では、キャンバスの中に四角や丸を描く。文字を描きそれを回転させる。

そして、お絵かき。

というサンプルがありました。

面白そうなので、お絵かきに挑戦。

ついでに、ブログの本文中にも。

基本的なルールとして、今まではHTMLをShift-JISなどで、書いていましたが、HTML5ではUTF-8。

タグは小文字で書きます。

そこで、このテストコードを書くにも私の場合テキストエディタとして秀丸を使っていますが、保存時にコードをUTF-8に変更。

これは通常そのまま保存するとWindowsの場合標準のShift-JISで保存してしまいます。

そこで、メニューのファイルから、エンコードの種類をUTF-8に変更します。

そして名前を付けて保存。

さすがに、このコードをそのままブログの記事覧に貼り付けることはできませんので、作成したHTML5のドキュメントをファイルとしてアップロードします。

次に、Flashと同じようにiframeタグで、srcの中にアップしたファイルを入れてみました。

その結果がこれ。

内側の四角部分をマウスでドラッグしてみましょう。(Ie9若しくは、Ie以外のブラウザでご覧ください)



もちろん記事中の画像は500×500ですがこのサイズでは記事に入りませんので canvas widthを300に変更しました。

Ie9でソースが見たい方は、灰色の内側で右クリック、ソースの表示を行って下さい。



posted by hirano at 01:34| 埼玉 ☔| Comment(0) | TrackBack(0) | HTML5 | このブログの読者になる | 更新情報をチェックする

2011年05月10日

HTML5でイメージ効果

KoolMovesでHTML5の使い方がいまいちわからなかったのですが、連休前のバージョンアップで8.1.0になりました。

さらに、変更履歴で、HTML5のモーションスクリプトが22個も追加になっているということで、More Infoを確認したところ、HTML5のイメージ効果が40個(ただし、Ieでは見れない)となっていましたので早速確認してみました。

たしかに、HTML5のモーションスクリプトが40個になっています。

40 Html5 image effects (not viewable in IE)というところをクリックしてみましょう。

not viewable in IEですが、Ie9では表示できました。残念ながら、Ie8ではだめです。

作り方としては、Koolmovesでムービーエリアを設定し、Import imageで写真を貼り付けます。

ボタンの三角形はそのままでは上を向いていますので、回転してみました。

すると、HTML5では回転を反映できず、そのままの形となってしまいましたので、三角形を止め、多角形を使用して、右向き三角形と左向き三角形を作りました。

線なし、塗りつぶしを黄色とした後にボタンに変更。

次に画像をクリックして、Motion scriptの設定です。

右上にモーションスクリプトの内容を書きますので順番を決めてメモしておくと良いですね。

出力ファイル毎に一種類のMotion scriptを設定します。

右ボタンで次のファイル、左ボタンで手前のファイルに飛ぶようにURLを設定します。

その予定に従って、名前を付けて保存をした後にHTML5でエクスポートします。

Internet Explorerの場合は、9以上で見てください。

写真は不老川の辺りの桜です。
posted by hirano at 17:44| 埼玉 ☀| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。