Graphical Webの拡がり；HTML5とその周辺技術で実現する | gihyo.jp
もちろん、すべてHTML5を中心とする標準技術であるため、JavaScriptを通じてそれぞれを組み合わせて利用できます。 注目されるGraphicalWeb こうした新しいWebのグラフィックス技術の拡大もあり、2012年にはThe Graphical Webというカンファレンスがスイス開催されました。 The Graphical Web2012のWebサイト 実はこのカンファレンス、2002年から10年以上も続いているカンファレンスで、2011年まではSVG Openという名前で開催されていました（ちなみに、2007年には日本で開催されました）。しかし、2012年からカンファレンス内で扱う技術はSVGのみにとどまらず、HTML5 media、CSS3 Animations、2D Canvas、WebGLなどの技術も取り上げることとなり、こうした技術の総称としてカンファレンスのタイト
やっぱりFLASHなんていらない!? HTML5でできた超高度なインタラクティブサイト
やっぱりFLASHなんていらない!? HTML5でできた超高度なインタラクティブサイト2011.11.14 14:00 mayumine ｢One Milionth Tower｣は高層建築が社会に与えてきたストーリーをミニドキュメンタリーとして紹介するプロジェクト。 ｢One Milionth Tower ｣の注目すべきところは、世界初の、完全にHTML 5と WebGL、Javascriptだけで作られた、高度なインタラクティブなサイトになっているところです。 3Dのビルや写真（そして音も）のドキュメンタリーグラフィックスは、すべてWeb GL（2D/3Dグラフィックスをウェブブラウザだけで表現できるAPI）で表現されています。 さらに｢One Milionth Tower｣では、｢Popcorn｣と呼ばれる、WebのAPIとHTMLのビデオ属性を統合する特殊なJavascriptツール
第21回 HTML5とか勉強会「HTML5+ゲーム」 - 車輪を再発明 / koba04の日記
http://atnd.org/events/20007 という面白そうな勉強会があり、Canvas以外での実装方法やフレームワークについても知っておきたかったので参加してきました。 CanvasでFlashゲームを移植してみた経験から、これはフレームワーク化して面倒なところを吸収しないとツラいなぁと思っていて、他の会社ではどんな方法を使っているのかを知りたいというのもあって、、 Smartphone 向け HTML5 ゲームの作り方 @sou さん DeNAでの既存タイトルのスマートフォン対応についての話でした。 その方法としてDeNAでは、「HTML5+CSS3」、「Canvas」、「ExGameを使ったSWF->HTML5への変換」の３つあるとのことでした。今回はその中でもHTML5+CSS3についてが中心の発表でした。 Canvasについては先日のJavaScript勉強会では公開
JavaScript最新動向 〜WebSocket編〜
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
高度なゲームも作れる。HTML5/Canvasフレームワーク·CasualJS MOONGIFT
CasualJSはCanvasタグを使ったアニメーション/ゲーム作成用JavaScriptフレームワーク。 CasualJSはJavaScript/HTML5製のオープンソース・ソフトウェア。JavaScriptはHTML5の登場によって大きく花開こうとしている。位置情報の利用、ストレージ、WebSocket（今は切り離されているが）、Canvasタグ等様々な新技術が盛り込まれている。 ボタン Canvasタグを使うことで、アニメーションを行ったりグラフィックを描くことができる。それもJavaScriptからインタラクティブに扱えるものだ。だが全てを作り込むのは大変だ。そこで使ってみたいのがCasualJSというJavaScriptフレームワークだ。 CasualJSはHTML5のCanvasを利用するためのフレームワークだ。ActionScript3ライクという説明がついている通り、アニ
いろんなHTML5 canvasのフレームワークを試してみた
TFujinami codes (jsdo.it) 珍しくというか初めてニュースクリップではなくオリジナルで書きます。 EaselJSやGuryなど幾つかのHTML5 canvasのフレームワークを試してみました。 ランダムで線、四角（長方形）、丸（楕円）を描画します。画面をクリックするとローテーションします。 コード共有サイトのjsdo.itですべて公開してあります。 - EaselJS (記事) - Gury (記事) - oCanvas (記事) jsdo.it上では動作しないのでダウンロードしてください - jCanvaScript (記事) - CasualJS (記事) 4/27追加 パフォーマンス低し、使い方が間違っている？ - jCanvas (記事) 5/20追加 - Processing.js (記事) 5/24追加 - LibCanvas (記事) 6/8追加 Ell
WWW.AKIRAFUKUOKA.COM BLOG | 今VJするならブラウザででしょ！ HTML5でVJアプリ「Fi-VJ」を制作しました
HTML5ならのVJアプリだって作れるはず！で、作りました Fi-VJ ver1.02 デモページはこちら ファイルダウンロードはこちら (ver1.02) DLしたら@akirafukuokaに声をかけていただけると嬉しいです!! Fi-VJ(ファイブイジェイ)というVJアプリを極々個人的に制作しました。MacのネイティブアプリでもなければiPhone/iPadアプリでもありません。ブラウザで動くHTML5-VJアプリです。確認済み動作環境はMac版Safari 5.0.5だけです。他のブラウザでは確認してません（デモページはSafariとChromeで動くようですが）。というかローカル実行ではSafari以外ではまず動きません。これに関する解説は後ほど。 ここ数年ビデオミキサーにiPhoneやiPodを繋いでプレイしていた私ですが、そろそろPCを使ったVJに戻ろうかと思ったのがちょうど
Canvasを使ったグロー効果が幻想的!!HTML5/Videoタグ用jQuery Plugin | ゆっくりと…
新年、明けましておめでとうございます。旧年中、このブログ読んで下さった方々、お世話になりました。今年もがんばりますので、よろしくお願いします 😀 。 新年一発目のお題は、Philips 社 の TV に装備された Ambilight を模した jQuery Plugin の紹介です。このギミック、日本ではほとんど馴染みがないと思いますが、液晶 TV の背面外周に取り付けられた LED が画面に合わせた色に発光し、映画館の環境 （アンビエント） 光の雰囲気を演出するというものです。 デモ & スクリプト CodeZine さんの 「HTML5で実現できるマルチメディア系機能 – ここが違う！サンプルで見るHTML5（4）」 で紹介されていた デモ を辿って、セルゲイさんのエントリー 「Ambilight for the tag video」 に行き着きました。Firefox 3.5、Ope
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
canvasをバイト単位で修正する方法（ImageDataの使い方） - KAYAC Engineers' Blog
引っ越ししました。agoです。 思いっきりネタがかぶってますが、あまり気にせずcanvasネタを書いてみたいと思います。 今回はcanvasの中でもImageData関係をまとめて見ました。 ImageDataってなに？ canvas内のバイト列を扱うためのObjectです。 canvas内の各バイト毎に赤、緑、青、透明度の情報を配列として保持しています。 何に使うの？ canvas内をバイト単位で修正したい場合に使います。 canvas内に図形等を書く場合、通常提供されているlineTo等を使用することも出来ますが、こういった抽象メソッドは一回ごとの呼び出しコストが大きいため、細かい単位の操作には向きません。 その点、ImageDataであればバイト単位での操作しかできない代わりに呼び出し毎のコストが小さいため、細かい単位の操作も高速に行うことができます。 ただ、もちろん線を引く、丸を書
canvasでキラキラした背景を作る方法 - KAYAC Engineers' Blog
tech.kayac.com、ささやかにリニューアルしました！ tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が？って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcanvasについて記事を書こうと思います。 最初なので、、、 簡単にぼくの属性を説明すると、html5とか好き、CSS3とか好き、canvasとか興味ある、非モテ、javascriptはjQueryがなんとなくわかる程度、非リア充。こんな感じです。 今回のリニューアルではコーディング全般を担当しました。 特に、プログラミングに関してはド素人だ！ということを強調しておきます。 そんなぼくが、canvasを使ってキラキラした背景を作ってみました 「リニューアルするからには新しいことがやりたいよね。だったらhtml5とc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://html5beats.com/
HTML5 canvasをjQueryから簡単に扱う「jCanvas」