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 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/205615739

この記事へのトラックバック
×

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