[B! canvas] suisuina0823のブックマーク

suisuina0823 id:suisuina0823

canvasに関するsuisuina0823のブックマーク (13)

Paper.js — Future Splash
Source
suisuina0823 2015/11/02
JavaScript

water

canvas

metaball
リンク
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
suisuina0823 2015/02/17
createJS

webGL

canvas
リンク
【HTML5 Dev】HTML5 でゲーム：EaselJS を使って canvas 内のスプライトをアニメーション化 - インターネットコム
suisuina0823 2015/01/08
html5

canvas

easel

JavaScript
リンク
Roller Coaster
suisuina0823 2014/09/19
html

webGL

canvas
リンク
自社サイトリニューアルで、ぐにゃぐにゃする丸のヤツとかについて | ココノヱブログ
前の記事を岡田がバズらせたので、プレッシャーを感じている山田です公開後も細かくマイナーチェンジを重ねているココノヱのサイトリニューアルのお話、その２です。僕はぐにゃぐにゃする丸いヤツとか、ここのゑ君が落ちてきてDOM要素にぶつかるのとか、あと全体的な仕上げと調整で頑張りました。
suisuina0823 2014/06/02
html5

box2d

canvas
リンク
Honda Fit Challenge Launched
suisuina0823 2014/05/22
canvas
リンク
Happy Elements Labs: 世界平和とAndroid
エンジニアの草苅です。スマートフォンを扱うエンジニアの皆さんは、日々Android のバグに悩まされているのではないかと思います。弊社も類に漏れず様々な Android のバグと戦っています。特にあんさんぶるガールズ！ではアニメーションはすべて Canvas を利用していることもあり、Android の Canvas 絡みのバグに、頭を痛めています。 Android のバッドノウハウは悩んでいる人みんなで共有した方が、世のため人のためになるのではと思い立ったので、世界平和を願っていくつかまとめてみたいと思います。 1. GPUレンダリングの設定によって Canvas で不具合が発生する Android は OS のバージョンや、WebView のレンダリングエンジンの違いによって、GPUレンダリングOFFの場合に、Canvas が正常に表示できない端末、もしくはGPUレンダリングONの
suisuina0823 2013/08/08
canvas

GPU

android
リンク
http://html2canvas.hertzen.com/examples.html
suisuina0823 2013/04/15
html

canvas

JavaScript

draw
リンク
[HTML5] CanvasでRetina対応を行う - YoheiM .NET
こんにちは、Canvasでバリバリ仕事中の@yoheiMuneです。最近のWebアプリでCanvasを使っているアプリが多いですが、Retina対応できておらず、にじんだ感じになっているアプリが多々あり。。なので、CanvasでRetina対応できるのかを調べました。今回はその結果を記載したブログとなります。 Canvasで普通に描画するとにじむ Canvasの描画内容をRetinaでない多くのPCブラウザで見る分には問題ないのですが、 iPhoneなどのRetina対応したブラウザで見るとにじんで見えてしまいます。画像などの表示ではRetina対応を行う事が多いですが、 CanvasでもRetina対応する事でにじまずに描画内容を表現できるようです。 CanvasでRetina対応をする方法は、画像のRetina対応の考え方と同じで、描画した内容を1/2のサイズで表示することでキ
suisuina0823 2013/03/18
html5

canvas

retina
リンク
Canvas APIの基礎
もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer（9以降）に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
suisuina0823 2013/02/07
JavaScript

canvas

html5
リンク
WebGL対応のライブラリThree.jsを爆速にする方法 | ClockMaker Blog
前回のWebGL(Three.js)とStage3D(Away3D)の比較ですが、Mr.doobさんを始め国内外の多くの方からご指摘頂きWebGL(Three.js)版を最適化したところ、最終的にはFlash(Away3D)版と同じぐらいのパフォーマンスになりました。当初、最適化・検証不足で間違った情報を掲載してしまい申し訳ありませんでした。さて、そのWebGL(Three.js)版を最適化した手法が有意義だったのでシェアしたいと思います。デモの紹介まずはこちらの2つのデモの再生を比較してみてください。WebGL対応のブラウザ(例：Google Chrome)でご覧ください。 ▼最適化前 ▼最適化後どうでしょう？圧倒的に後者のほうが滑らかに再生できているのではないかと思います。後者のほうは配置している3Dのオブジェクト数が10倍近く多いにもかかわらずです。 ※ちなみにFlash
suisuina0823 2013/01/21
JavaScript

threejs

3d

canvas
リンク
Canvas始めました – ボタンを作る
Canvasでインタラクティブなことをするためにボタンを作るの巻。できたことはできたけど、完成にはかなり遠いところにしかたどり着けませんでした。 ActionScriptのSimpleButtonのような汎用性を目指しましたが途中で挫折しました。作るにあたって懸念していたmouseoverの処理にやはり悩まされました。 Canvas Click Demo Vol.2 ボタンを作った画面左上の「赤い四角」がボタンです。もっとかっこ良くしたかったのは言うまでもないのですが、これ以上コードが増えないようにということで許して下さい。・白いところをクリックするとその地点に丸が作られます。・ボタンをクリックするとCanvas上の丸が消えます。 HTML var canvas = document.getElementById('canvas'); var context = canvas.
suisuina0823 2012/05/15
canvas

html5

button
リンク
Canvasリファレンス - HTML5.JP
HTML5の仕様に基づいて、Canvasで利用できるメソッドやプロパティ（属性）のリファレンスをご用意しました。主にHTML5の仕様の和訳となりますが、HTML5の仕様は非常に分かりにくい説明があるため、一部、図や補足説明を入れました。各メソッドやプロパティごとにサンプルスクリプトもご用意しましたので、具体的なスクリプティングが理解できます。ブラウザごとの対応についても触れています。皆様のCanvasの理解にお役に立てれば幸いです。 HTMLCanvasElement HTMLCanvasElementのメソッド
suisuina0823 2011/10/13
Web_tec

html5

canvas
リンク
1