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 | このブログの読者になる | 更新情報をチェックする

広告


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

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

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


×

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