HTML5のCanvasで作る、Flash不要のお絵かきツール (1/5)
HTML5 Canvasで作った「シンプルペイント」。ペンの色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5の新機能で特に注目を集めているのが、Flashなどのプラグインを使わずにWebブラウザー上でグラフィックを描画できる「Canvas」です。Canvasは、すでにInternet Explorer（IE）をのぞく、ほとんどのブラウザーに実装されていますし、マイクロソフトは現在開発を進めている「IE9」でHTML5を積極的にサポートするとしていますから、IE9にCanvasが実装される可能性は高そうです（ただし、現在公開されているPlatform Preview版ではCanvasは実装されていません）。すべての主要ブラウザーでCanvasが利用できるようになれば、画像処理を伴うWebア
HTML5 Canvas・お絵かき編 (gorogoronyan)
はじめの一歩・マウスイベントを拾って描画する ◎ TestCanvasMouseEvent01.html （2010/02/11） HTML5 Canvasのサンプル で紹介しているサンプル。 内容は簡単な塗り絵のサンプルです。マウスでドラッグすると描画します。 HTML／JavaScriptでは部品やマウスの座標がややこしくなります・・・Google 検索で「div、座標」ぐらいで検索してみてください。div の座標を得るあたりからややこしくなる。 ◎ TestCanvas_Paint01.html （2010/02/11） 上のサンプルに画像消去ボタンやデバッグ表示のテキストエリアをつけたもの。 描画のずれをなくすため、Canvas をウインドの左上 (0,0) につめています。また、ウインドのスクロールを禁止にしています。 これを土台にしていろいろ足してみます。 筆の色
HTML5のcanvasを使ってみた
マウスイベントのclientXとclientYは、クライアント座標であって、canvasの左上を(0,0)とした座標ではないので、四角形を出現させる位置がずれていた。、offsetTopとoffsetLeftを使って修正したが、これは規格にはない。どうしたものか。 かなりやっつけ仕事。canvas上をクリックすると、どんどん四角形が増えていく。ドラッグすると面白いことになる。回転軸が四角形の中央でないのは仕様。バグだったけど、動きが面白かったので、あえて修正しなかった。 一つだけ気にくわない点がある。いわゆる拡大縮小や回転、移動は、行列で行えるのだが、"The transformations must be performed in reverse order."ってどういう事だ。なぜ逆なんだ。逆にしたら分かりやすくなるとでも思っているのか？ どう考えても混乱するだけだろ。あと、Ident
SVG vs. Canvas? « HTML5.JP ブログ
先日の HTML5 3Days の Tech Talk で Canvas と SVG の違いを簡単に説明しましたが、これを深く追求してレポートされている方がいらっしゃいましたので紹介します。 2009 年 10 月にカルフォルニアで開催された SVG Open 2009 で、ヘルシンキ大学の Samuli Kaipiainen 氏と Matti Paksula 氏によるプレゼンテーション SVG vs. Canvas on Trivial Drawing Application で、SVG と Canvas の特性の違いや、それらを組み合わせる方法などが解説されています。このプレゼンテーションの内容は、こちらの資料に詳しく説明されています。 このプレゼンテーションを要約すると、次の通りです。 ピクセル描画では Canvas が優れている。SVG でもできないことはないが、ピクセルごとにノー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG OPEN
