タグ

html5とCanvasに関するShoCohのブックマーク (9)

  • Android × Canvas の即死ポイントとその回避策 | buccchi.jp

    CreateJS を使ったWebアプリをいくつか作ったのですが、iPhone はサクサクでも Android でやたらハマる。 Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。 機種や OS のバージョンにより動作がさまざまなため確認しきれない。 というとこでハマったポイント3つを共有します。 誰かもっとよい解決策を教えてくれるとありがたい。 即死ポイントその1 Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる 回避策 Canvas 領域を広めにとっておき、Canvas ではなく Container 側をリサイズ。 はみでた部分は css でトリミング。 これで落ちなくはなるが全体的にボケる。 2013.7.7 追記 その後、以下の方法を試したところ落ちずに動作すことが確認できました。 描画とかGPUアクセラレーション

  • HTML5でゲームを作りたい時に参考になりそうな記事のメモ - もとまか日記

    先日以下を書いたところ、 HTML5でスマホアプリを作ってみよう。第1回「じゃんけんゲーム」 あまり深く考えず「第1回」ってしちゃってたので(^^;;何かネタを考えないといけないなー・・・・ てことで、HTML5のCanvasを中心に、その他もろもろ、ゲーム作成に関連しそうなことについて色々調べてみたメモ。 HTML5全般について以前、以下でまとめた。前から気になってたHTML5について色々調べてみました この内容もまた整理し直さないと・・・ HTML5 Canvasの基礎HTML5のCanvasに関する基礎情報。Canvas - Canvasとは - HTML5.JP HTML5 CanvasのリファレンスCanvasリファレンス - HTML5.JPHTML5 Canvas Cheat Sheet 様々なゲームの作り方AppStoreのカテゴリ別だけど、JavaScriptが多いので参

  • GRADIUS

    THIS APP IS JUST A TECHNICAL DEMONSTRATION, AND NOT FOR COMMERCIAL USE. GRADIUS IS A TRADEMARK OF KONAMI DIGITAL ENTERTAINMENT, INC.

  • How To Enable HTML5 In Chrome | Robots.net

    Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp

    How To Enable HTML5 In Chrome | Robots.net
  • JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」:phpspot開発日誌

    html2canvas - screenshots with JavaScript JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」 サーバサイドでブラウザを動かしてスクリーンショットを取るというより、利用者のブラウザ上でスクリーンショットをJavaScriptとcanvasを使って生成しちゃおうというものらしいです。 canvas非搭載ブラウザはflashcanvasやExplorerCanvas等の代替が必要とのこと。 html2canvasでレンダリングされたサンプルも見ることが出来ます。 frameやobjectのサポートはしていない点に注意。 スクリーンショットを取る仕組みをサーバに仕込むとタイムラグがあったりサーバ側は大変だったりで色々問題点を抱えていますが、クライアント側でやれば画像を受け取るだけでいいので便利です。 クライアントごとの表示

  • HTML5花火大会から学ぶcanvasの表現力

    HTML5花火大会が始まりました! jsdo.itに集まった400以上の花火コードが、夏の夜空に打ち上がっています! 当にどの花火もクオリティーが高くて、見るだけでも楽しめます。 HTML5花火大会 花火のコードから学ぶcanvasの表現力 花火のコードの大半はHTML5のcanvas要素を使って描画されています。 canvasってなんだっけ? javascriptから自由にグラフィックを描画できる要素です。 以下のエントリーにわかりやすくまとまっています。 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル(かつ動的な)表現が行えるわけです。 今更聞けないcanvasの基礎の基礎 canvasで花火を描くには? 花火のお手コードから見ていきま

  • HTML5 canvas関連API - web探検隊

    canvas要素が持つプロパティ/メソッドプロパティ説明widthキャンバスの領域の幅(ピクセル)。省略時は300ピクセル。canvasタグのwidth属性に対応。heightキャンバス領域の高さ(ピクセル)。省略時は150ピクセル。canvasタグのheitht属性に対応。toDataURL(type,args)キャンバスの内容をdata URL文字列で取得。getContext(cibtextId)描画コンテキストを取得。引数に"2d"を指定すると、2次元グラフィックス用のコンテキストを取得出来る。 2D描画コンテキストが持つプロパティ/メソッド2Dグラフィックスの描画を行うためのコンテキスト(canvas.getContext("2d")で取得可能)が持つプロパティやメソッドです。プロパティ説明canvasこの描画コンテキストの基になったcanvas要素への参照。save()描画コン

  • Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング(仮題) - 最速チュパカブラ研究会

    MAX 打ち上げのときに川崎さんに「英語の記事書いたら絶対ウケるから書くべきだよ」と言われていつ書こうかなーと思ってたら、そういえば11日は休日だったので、日語の下書きだけでも一気に書いてみることにしました。 といっても、欲を出してあれもこれも書こうとして、結局まだ書ききれてませんけど。 タイトル案 Javascript と Canvas によるフルスクラッチ3Dプログラミング Javascript と Canvas 3Dプログラミング入門 ドキッ JSだらけの あと、今日(11日)は私の誕生日でもあります。25になりました。そろそろ鏡を見るのが怖くなってきますね。 以下、書きかけ Introduction Adobe MAX 2009 で Spark Project は、拡張現実(AR)のデモを展示し、来場者の注目を集めていた。Shibuya.JS のメンバーもこのデモに感激し、是非

    Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング(仮題) - 最速チュパカブラ研究会
  • HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。 - 風と宇宙とプログラム

    はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera

  • 1