Use the arrow keys to walk around the map. Space bar = jump. B = Shoot. This is a demo I created in 2005 to demonstrate the capability of Canvas. See also: textured version.
上の動画はHTML5で策定中のcanvas機能で出力しています。 残念ながら IE8にはcanvasが実装されておらず、excanvas.jsというJavascript ライブラリで機能を実現しています。そのため必ずしも十分な 速度は得られません。 IE9でcanvasが実装されましたがでIE9の機能を使うためにはmeta記述で http-equiv="X-UA-Compatible" content="IE=edge" を宣言する必要があります。 IE9で互換表示モード([ツール]-[互換表示])にするとexcanvas動作で固まることが 分かりました。iframeに入れると絵こそ得られませんが固まって しまうことがないことも分かりましたので、安全のため canvasをiframeに入れています。通常はiframeに入れる 必要はありません。 現在IE9の互換表示モードではココログの画面
前述のとおり canvas 要素は Web ページ内に空の画像領域を確保します。感覚としては画像ファイルを指定しない img 要素のようなもので、Web ページ上での扱いもほぼ同じです。画像がないので src 属性がなく、代わりに width, height 属性で描画領域のサイズを明示しなければなりません。また、JavaScript で描画対象の canvas を特定するための id 要素を指定するのが普通です。例えば、150x150 ピクセルの描画領域を確保するには、以下のように記述します。 <canvas id="example_canvas" width="150" height="150"></canvas> 閉じタグを忘れると以降の内容が表示されなくなるので注意してください。詳細は後述しますが、canvas 要素内のテキストはブラウザが canvas をサポートしていないときの
※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。
Firefox 1.5 より、 Firefox はプログラム可能な画像のための新しい HTML 要素を含みます。<canvas> は WHATWG の canvas の仕様を基にしています。WhatWG canvas 仕様自体は Safari で実装された Apple の <canvas> を基にしています。クライアント上でグラフ、UI 要素、および他のカスタムグラフィックスの描画に使用することができます。 <canvas> は 1 つ以上の描画コンテクスト を公開した固定サイズの描画表面を作ります。現在は 2 次元描画コンテクストのみが実装されています。 3D グラフィックスの描画には、 WebGL レンダリングコンテクストを用いると良いでしょう。 始めに、2 つの交差した長方形を描く簡単な例を見てみましょう。片方の長方形は透明度を持っています。 function draw() { va
http://www.geocities.jp/psipage/html5/html5_canvas_shot.html 書いてみた。 boxの上半分にターゲットが現れ、下半分をクリックで弾を発射。 パラメータの値をいじると面白いかも。 context.shadowBlurについて contextに影(ぼかし)を入れるためにshadowBlurを適用したら処理が重くなった。対応してるブラウザも少ない。 shadowBlur プロパティ - Canvasリファレンス - HTML5.JP 気になったこと マウスの座標はキャンバスからの相対位置ではなく絶対位置。なのでCanvas領域の上にバナー広告などが入ることを想定すると、相対位置で考えると思い通りに動かない(ことがあるかも)。とりあえずCanvas領域の位置は絶対配置で指定した。 <canvas id="canvassample" wid
HTML5の目玉機能の1つにCanvasタグがあります。このCanvasタグとJavaScriptを使ってWebブラウザで遊べるゲームが少しずつ登場してきたので、いくつか紹介しましょう。HTML5がどんなポテンシャルを持っているのか、その一部が楽しく分かると思います。 1つめはスーパーマリオみたいなゲーム。ブログ「PurpleFloyd's Blog 」のエントリ「 A Platform Game Using HTML5 Canvas 」で紹介されていました。 遊び方は、カーソルキーで主人公を左右に移動、スペースキーでジャンプです。音は出ませんしスコアも計算しません。Internet Explorer 7/8では「耐え難いほど遅い」そうですので、プレイはFirefoxなどでどうぞ。 もう1つのゲームは、Google Chromeの高速性やとHTML5のデモンストレーションのためにグーグルが
サイト内検索 この記事は、html5doctor に掲載されている記事「HTML 5 + XML = XHTML 5」を日本語訳したものです。 原文タイトル HTML 5 + XML = XHTML 5 原文ページ URL http://html5doctor.com/html-5-xml-xhtml-5/ 著者 Bruce Lawson 氏 原文投稿日 2009-07-02 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く