いまさら聞けないHTML5 Canvasの使い方
Flashになじみのある人がHTML5でまず興味を持つのが、アニメーションやモーションなどの表現力ではないでしょうか？ 私がFlashに興味を持ち、虜になったきっかけも、モーションの気持ちよさやデザイン性、インタラクティブな表現力でした。 今回は基本的なモノ(object)を動かすための準備として、矩形や円を描画してみましょう。HTML5では、canvas要素とJavaScriptのCanvas APIによって、ビットマップ画像を描画できます。 Canvasで画像を描画するには、HTMLでキャンバス領域を定義します。 ■サンプル1[01.html] <body> <canvas id ="cvs1" width="150" height="150"></canvas> <script type="text/javascript" src="js/01.js"></script> </bod
リバースエンジニアリングしたくなるHTML5サイト (1/4)
Webメディアをはじめ“HTML5”をキーワードとした話題になることが多く、大げさではなくHTML5という文字を見ない日はない。 HTML5は2011年5月中の予定で最終草案をW3Cで策定中だ。HTML5を最終草案を待って実装をするのもいいだろう。しかし、世界ではHTML5を使ってサービスを始めているサイトもある。以下に、それらのサービスを紹介しよう。 進むCanvasの実装 欧米ではたいへん人気のあるパーソナルバンキングサービスのBank Simple。このサイトはJavaScriptでビットマップ画像を描ける「cavas要素」を利用して、紺色の背景模様を変更している。Canvasをデザインとして利用するサービスは非常に面白いし、挑戦的な試みだ。 このJavaScriptはgithubでも共有されているので、誰でも利用して自身のWebサイトに実装できる。 Bank Simpleは、ページ
まずは基本から・HTML5のCanvasについて参考になったサイトまとめ
WebデザインHTML5 Canvas ようやくHTML5に興味を持ち 始めました。サンプルを以前 記事にして、凄いなーと思っ ていましたが、なかなか時間 がなく、先延ばしに。 ようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマしたのでこれから学ぼう、とお考えの方とシェアしたいと思ってエントリー。 というわけで、基本的な情報がほとんどです。大量の情報を見ても混乱するのである程度絞っています。 html5.jp リファレンスサイトです。リンク先はcanvasカテゴリに。ここからスタート、というか最後までたぶんお世話になりそう。 ht
今更聞けないcanvasの基礎の基礎 - KAYAC engineers' blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
アドビ、FlashをHTML5のCanvasへ変換するプロトタイプ機能を明らかに。アニメーションも変換
アドビ、FlashをHTML5のCanvasへ変換するプロトタイプ機能を明らかに。アニメーションも変換 アドビシステムズは3月10日に始めた新しいブログ「Design and Web」の中で、FlashをHTML5のCanvas要素で置き換える「Smart Paste」のデモ動画を公開しました。この機能は現在開発中のDreamweaver CS5のプロトタイプ機能とのことです。 （追記3/18：上記ブログの1つ目のエントリ「Design & Web」に、紹介する機能は「It won't be in the next version of CS.」であるとの記述がありましたので、「Dreamweaver CS5」の部分を削除させていただきます。すいませんでした）。 FlashのファイルをJavaScriptでレンダリング、Canvasへ描画 11日付けで公開されたエントリ「Canvas fo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1ka2ka.com
HTML5 Canvas Cheat Sheet
