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でスマホアプリを作ってみよう。第１回「じゃんけんゲーム」 あまり深く考えず「第１回」ってしちゃってたので(^^;;何かネタを考えないといけないなー・・・・ てことで、HTML5のCanvasを中心に、その他もろもろ、ゲーム作成に関連しそうなことについて色々調べてみたメモ。 HTML5全般について以前、以下でまとめた。前から気になってたHTML5について色々調べてみました この内容もまた整理し直さないと・・・ HTML5 Canvasの基礎HTML5のCanvasに関する基礎情報。Canvas - Canvasとは - HTML5.JP HTML5 CanvasのリファレンスCanvasリファレンス - HTML5.JPHTML5 Canvas Cheat Sheet 様々なゲームの作り方AppStoreのカテゴリ別だけど、JavaScriptが多いので参
『canvas』要素の勉強をする時の参考サイトまとめました | HTML5でサイトをつくろう
HTML5の『canvas』要素 今回の標題でもあるcanvas要素は、HTML5の新要素の中で最も注目されている要素の1つなので、私もこれから学習していくのがとても楽しみです。 まずcanvas要素について知るために参考サイトを見つけることから始めました。調べるとすぐにサンプルなどが数多くヒットし、その中には目を奪われる表現や複雑な処理を行っているモノがいくつもありました。また、サンプルは非常に多いのですがちゃんとしたサイトでの事例はまだまだ少ないのが現状だということも知ることができました。まずは焦らず基礎から勉強していこうと思います。 『canvas』要素のサンプルまとめ 今回調べた『canvas』要素を使ったコンテンツをいくつかピックアップしましたのでご紹介します。 HTML5 Canvas and Audio Experiment 音楽に合わせて複数のオブジェクトが円になったり、マ
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 のメンバーもこのデモに感激し、是非
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GRADIUS