[B! *html5] crystalineのブックマーク

Ben Joffe |Canvascape

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.

crystaline 2010/10/27

リンク

上の動画は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の互換表示モードではココログの画面

crystaline 2010/10/27

リンク

JavaScript で画像処理！ canvas を使ってみよう - WebOS Goodies

前述のとおり canvas 要素は Web ページ内に空の画像領域を確保します。感覚としては画像ファイルを指定しない img 要素のようなもので、Web ページ上での扱いもほぼ同じです。画像がないので src 属性がなく、代わりに width, height 属性で描画領域のサイズを明示しなければなりません。また、JavaScript で描画対象の canvas を特定するための id 要素を指定するのが普通です。例えば、150x150 ピクセルの描画領域を確保するには、以下のように記述します。 <canvas id="example_canvas" width="150" height="150"></canvas> 閉じタグを忘れると以降の内容が表示されなくなるので注意してください。詳細は後述しますが、canvas 要素内のテキストはブラウザが canvas をサポートしていないときの

crystaline 2010/10/27

リンク

JavaScriptによるHTML5プログラミング入門 - libro

※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。

crystaline 2010/10/26

リンク

Drawing Graphics with Canvas - MDC

Firefox 1.5 より、 Firefox はプログラム可能な画像のための新しい HTML 要素を含みます。<canvas> は WHATWG の canvas の仕様を基にしています。WhatWG canvas 仕様自体は Safari で実装された Apple の <canvas> を基にしています。クライアント上でグラフ、UI 要素、および他のカスタムグラフィックスの描画に使用することができます。 <canvas> は 1 つ以上の描画コンテクストを公開した固定サイズの描画表面を作ります。現在は 2 次元描画コンテクストのみが実装されています。 3D グラフィックスの描画には、 WebGL レンダリングコンテクストを用いると良いでしょう。始めに、2 つの交差した長方形を描く簡単な例を見てみましょう。片方の長方形は透明度を持っています。 function draw() { va

crystaline 2010/10/26

リンク

HTML5 Canvasでシューティングっぽいもの - juntkの日記

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

crystaline 2010/05/15

*html5

リンク

HTML5で書かれた「スーパーマリオ」みたいなゲーム

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のデモンストレーションのためにグーグルが

crystaline 2010/05/15

*html5

リンク

http://www.designwalker.com/2009/11/html5.html

crystaline 2009/11/10

リンク

HTML5.JP - 次世代HTML標準 HTML5情報サイト

HTML5.JP は、HTML5 の国内での普及を目指し、2007 年に個人プロジェクトとして運営が開始されました。2019 年現在、すでに HTML5 は当たり前のように活用され、多くの情報がネットから入手することができるようになりました。当サイトの役割は終えたことに加え、当サイトの更新もままならず情報も古いままであったことから、当サイトを閉鎖することにいたしました。これまで当サイトをご支援頂きました皆様には心より御礼申し上げます。 2019 年 8 月 15 日管理人より

crystaline 2009/10/29

リンク

HTML 5 + XML = XHTML 5 - html5doctor - HTML5.JP

サイト内検索この記事は、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 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。