GitHub - bbc/VideoContext: An experimental HTML5 & WebGL video composition and rendering API.
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="../dist/videocontext.js"></script> </head> <body> <!-- A canvas needs to define its width and height to know how many pixels you can draw onto it. Its CSS width and height will define the space it takes on screen If omitted, the canvas dimensions will be 300x150 and your videos will not rendered at their optimal defi
第36回 たくさんのオブジェクトを連結リストで扱う | gihyo.jp
前回の第35回「たくさんのパーティクルに弾けるようなアニメーションをさせる」ことで表現は仕上がった。今回は本連載の最終回として、たくさんのオブジェクトの扱いについてひとつ知識を深めたい。今回のお題にかぎらず、多くのオブジェクトは配列に入れるのがお約束だ。ただ、そうした処理を自らクラスでつくろうとするとき、「連結リスト」という仕組みがある。それを紹介しよう。 連結リストの使い道 「連結リスト」はオブジェクトを順番にまとめる仕組みだ。配列と同じように、オブジェクトをいくつもエレメントとして加えてから、それらすべてを取り出して扱える。配列と異なるのは、エレメントがインデックスをもたないことだ。そのため、連結リストではエレメントをいきなり指定することはできず、頭から順に取り出しながら目指すオブジェクトを探さなければならない。 では、連結リストはどのような場合に使えて、エレメントをどういうコードで
写真サービス機能のブラウザ内実装 | 株式会社サイバーエージェント
2-1. リサイズ処理 Figure 2. Mobile Safariによる画像アップロード画面 最終成果の画像データを、サーバーサイドAPIにPOSTすることがゴールである。Androidにおいて、XMLHttpRequestでBlobをリクエストに設定しても空のボディで送信される問題がみられるため、今回はBase64 encoded DataURIとしてPOSTすることにしている。 2-1-1. 基本実装 ƒ 今回のリサイズ処理では、Canvas要素とFile APIを利用する。基本方針としては、inputtype='file'のchangeイベントから、Fileオブジェクトを取得し、それを一度Canvasに書き出すことでリサイズを試みる。最終的には、canvas.toDataURL() によってDataURIを取得する。 下記に、基本実装のサンプルを示す。( http://co
『スマートフォン向けJavaScriptライブラリ tofu.js』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは！ 現在ブラウザベースの新規ゲームの立ち上げをしています、2013年入社のチャーリー@charlie10151015です！ 主にフロント側をメインにJavaScriptというへんてこな言語を書いています。 最近のマイブームは3D関連でthreejs, webGL, Blenderなどに手を伸ばしております。 tofu.jsについてお話できればと思います。 tofu.jsとは？tofu.jsはHTML5に組み込まれたcanvasをFlashライクなコードで利用できるJavaScriptのライブラリです。 弊社の主席エンジニアが開発し、
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
JavaScriptで画像加工アプリを作ろうぜ！
今回、紹介するライブラリはこちらの「Pixastic」というJavaScriptライブラリです！ Pixasticライブラリを利用すると、画像にエフェクトなどの効果を掛けられます。HTML5のAPIと連携することで、アプリケーションのような動作も可能になります。 過去に「HTML5」関連の勉強会で発表した際、このPixasticライブラリを使ったベータ版サンプルアプリを披露しました。筆者としては非常に優れたライブラリであると思いますので、再度記事にて紹介します。 Pixasticとは？ 画像に手を加えることができる、オープンソースのJavaScriptライブラリです。GitHubにもアップロードされていますが、以下のURLが「Pixastic」のサイトです。 ブラウザ上で作業できる これまでの画像加工ソフトは、特定の画像変更・加工アプリをPCにインストールし活用してきました。「Pixast
画像不要！HTML5のCanvasでグレースケールのマウスオーバーが作れるチュートリアル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ももこです。 HTML5の新要素であるCanvasを使って、グレースケールのマウスオーバーを実現するチュートリアルをご紹介します！ 現在CanvasはFirefox/Chrome/Safari/Operaなど殆どのブラウザの最新版で実装されています。 ■DEMOを表示 Javascript <script> $(window).load(function() { $('#gallery img').each(function() { createCanvas(this); }); function createCanvas(image) { var canvas = document.createElement('canvas'); if (canvas.getContext) { var ctx = canvas.getContext("2d"); // キャンバスサイズを指
HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 - ICS MEDIA
HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 2013年3月15日に開催されたCreateJS勉強会（第2回）で発表したWebサイト「日本全国花粉飛散マップ」ですが、CreateJSとTypeScriptを使って制作しました。 今回の作品のポイントとしては、次の3点があげられます。本記事では次を具体的に説明します。 HTML5で制作、デスクトップだけでなくスマートフォンやタブレットでも再生可能 CreateJSで、DOMではできないHTML5 Canvasならではの表現 TypeScriptを用いて低学習コストで効率的な制作の実現 スマートフォンやタブレットでも閲覧可能 このWebサイトは環境省が提供している資料を元に、過去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でCanvasアプリを作る入門編 ~canvas関連メソッドリファレンス~ - nigoblog
前回ざっくりWEBアプリが来る!という記事を書きました。 というわけで今回はWEBアプリの作り方!特にcanvasを利用したアプリの作り方について書いていこうと思います。かなり内容は入門者向けですので、まだプログラミングを知らないという人でも記事を読みながらプログラミングが出来ると思います。 これも連載形式で書いていこうと思います。 連載が終わる頃にはcanvasでWEBアプリを作れるようになっていることでしょう! 第一回目のテーマは色々やってみようということでcanvas関連メソッドのリファレンスを書いていきます。 参考図書 canvasで出来ること canvasを使う準備 canvasで良く使うメソッド まとめ という流れで書いていきます。 参考図書 参考図書にはこちら。 HTML5 Canvas 作者: Steve Fulton,Jeff Fulton,安藤慶一出版社/メーカー: オ
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
Minecraft4kJS - jsdo.it - Share JavaScript, HTML5 and CSS
A quick port of Minecraft4k to test what's possible in JS and HTML5. Because of the nature of this project (it was originally meant as an entry for the Java4k competition, which focuses on executable size), the code is HORRIBLE, but fairly small. You may use the code in here for any purpose in any way you want, at your own risk. var ctx; var pixels; var w = 200; var h = 200; var map = new Array(64
いまさら聞けないHTML5 Canvasの使い方
Flashになじみのある人がHTML5でまず興味を持つのが、アニメーションやモーションなどの表現力ではないでしょうか？ 私がFlashに興味を持ち、虜になったきっかけも、モーションの気持ちよさやデザイン性、インタラクティブな表現力でした。 今回は基本的なモノ(object)を動かすための準備として、矩形や円を描画してみましょう。HTML5では、canvas要素とJavaScriptのCanvas APIによって、ビットマップ画像を描画できます。 Canvasで画像を描画するには、HTMLでキャンバス領域を定義します。 ■サンプル1[01.html] <body> <canvas id ="cvs1" width="150" height="150"></canvas> <script type="text/javascript" src="js/01.js"></script> </bod
ELEKS Vacancies: Lviv, Ternopil, Kyiv, Ivano-Frankivsk
We value your time, that is why you can get your offer, spending less than 2 hours on the interviews. 1Application Send your CV, apply via LinkedIn or contact us with a job application. Once we hear from you, our professional recruiter will follow you up via Skype or phone for a small talk. You will get more details about the vacancy, share your expectations, and if everything goes well, we’ll get
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト
IDEA * IDEA
Efficient data transfer through zero copy
第1回 読み込んだ画像をトゥイーンアニメーションさせる：HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う｜gihyo.jp … 技術評論社
IBM Developer
IBM Developer