HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
第1回 読み込んだ画像をトゥイーンアニメーションさせる | gihyo.jp
これからのWebはHTML5だ。とはいわれるものの、どの機能や技術を使うかは、コンテンツ次第でさまざまといえる。その中で、ダイナミックでインタラクティブな表現をつくりたいとき、Canvasの機能が注目される。ただし、Canvasが提供するのはおもに描画の機能で、アニメーションやインタラクションはJavaScriptライブラリの助けを借りることになる。 そこで本連載では、CreateJS Suiteを選んだ。開発者は、Flashコンテンツの世界で有名な Grant Skinner（グラント・スキナー）氏だ[1]。「ダイナミックでインタラクティブな表現」ともって回った言い方をしたが、つまりは「Flashみないな」ものがつくりたい（つくってほしい）という要求だろう。CreateJSのライブラリ群は、Flashを使っていた人たちにとっては、なじみやすい設計になっている。 また、最近注目されてい
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オブジェクト）は従
第32回 HTML5によるリッチコンテンツ作成のためのJavaScriptライブラリ「CreateJS」 | gihyo.jp
CreateJSで提供される5つのツール 今回は、4月に公開されたばかりの「CreateJS」を紹介します。CreateJSはHTML5を利用したリッチコンテンツ作成のためのJavaScriptライブラリ/ツール集です。著名なFlashエンジニアであるGrant Skinner氏が開発しており、ActionScriptに似た使用感を実現している点が大きな特徴と言えます。 CreateJSでは、次の5つのツールが提供されています。 EaselJS TweenJS SoundJS PreloadJS Zoe それぞれ、以下のような機能を備えています。 EaselJS EaselJSはHTML5のキャンバス上にコンテンツを描画するためのJavaScriptライブラリです。提供されるAPIがActionScript風になっており、Flash開発者ができるだけ違和感なく利用できるように工夫されてる点
[JS]透過処理をした写真画像の転送量を軽くする方法
通常、透過処理をした写真画像を使用する際のフォーマットはPNGを使用することが多いと思います。これを写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法を紹介します。 デモでは、PNGのみで127KB、JPEG with PNGで42KB、と約1/3容量が軽減しています。 ;(function() { var create_alpha_jpeg = function(img) { var alpha_path = img.getAttribute('data-alpha-src') if(!alpha_path) return // Hide the original un-alpha'd img.style.visiblity = 'hidden' // Preload the un-alpha'd image var image = document.cre
HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2025 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
第1回 SVGの基礎知識 | gihyo.jp
SVGは比較的古くからある仕様の1つですが、2010年3月にマイクロソフトがInternet Explorer 9でのサポートを表明してから一気に注目が高まりました。そんな古くて新しいSVGを今から使える情報と、将来の展望を全4回の集中連載で解説します。 SVGとは SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィック言語もしくは画像フォーマットです。W3Cによってその仕様が定義されており、画像フォーマットとして用いる場合は拡張子.svgが使用され、MIME形式はimage/svg+xmlが用いられます。 SVGの現状 Firefox、Safari、Google Chrome、Operaなどのブラウザが既にサポートしており、Internet Explorerもそのバージョン9、具体的にはInternet Explorer 9: Platform
HTML5 Canvas
HTML5はWeb開発に革命をもたらすとも言われています。本書ではHTML5の機能で最も注目されているCanvasについて学びます。Canvasを使った2Dオブジェクトの描画、テキストレンダリング、画像・映像・音声処理、WebGLによる3Dアニメーション。これらすべてのトピックをインタラクティブなサンプルとともにわかりやすく解説します。Canvasの機能を最大限に引き出すためのアルゴリズムを扱っているので実践手法や応用力も身につきます。Canvas 2D APIのすべてを網羅しているのでリファレンスとしても好適です。 目次 訳者まえがき まえがき 1章 Canvas入門 1.1 HTMLページの基礎 1.1.1 <!DOCTYPEhtml> 1.1.2 <htmllang="en"> 1.1.3 <meta charset="UTF-8"> 1.1.4 <title>...</title
JavaScriptグラフィックス
TOPICS Programming , Web , HTML/CSS , JavaScript 発行年月日 2012年03月 PRINT LENGTH 288 ISBN 978-4-87311-528-3 原書 Supercharged JavaScript Graphics FORMAT Webテクノロジーが進化したことによりJavaScriptグラフィックスを使ったリッチなWebアプリケーション開発が可能になりました。本書ではJavaScriptによる最新のグラフィックスプログラミングについて解説します。ゲームやDHTMLエフェクト、HTML5 Canvasなどの実例を通して、高性能なJavaScriptグラフィックスの実装方法を学びます。グラフィックスやアニメーションだけでなく、WebSocketを用いた通信、Google Chart Tools、スマートフォン向けのトピックまで幅
HTML5でゲーム開発。JavaScriptゲームフレームワークまとめ | BACKEND AS A SERVICE mbaas BLOG
ゲームと言えばネイティブアプリなイメージがありますが、HTML5やJavaScriptエンジンが高性能化するのに伴ってWebブラウザでも十分ゲームが遊べるようになっています。Webブラウザであればインストールの手間なく遊べて、さらにラップすることでアプリ化することだって可能です。ゲームエンジンは多数存在しますが、今回は特に2Dをサポートしたソフトウェアを紹介します。mBaaSお役立ちブログ トップ> ブログ> Tips> HTML5でゲーム開発。JavaScriptゲームフレームワークまとめ ゲームと言えばネイティブアプリなイメージがありますが、HTML5やJavaScriptエンジンが高性能化するのに伴ってWebブラウザでも十分ゲームが遊べるようになっています。Webブラウザであればインストールの手間なく遊べて、さらにラップすることでアプリ化することだって可能です。 ゲームエンジンは多数
WebGL 開発支援サイト wgld.org
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
HTML5 CanvasをjQueryライクに操作できるプラグイン「jCanvas」
はじめに HTML5において追加されたCanvasは、HTMLとJavaScriptを用いてWebページ内に図形や線などを描画できる機能で、動画や音楽を再生するvideoタグやaudioタグなどとともに、HTML5の代表的な機能としてしばしば紹介されます。 Canvas機能を用いるとHTMLのcanvas要素で定義された領域に対してJavaScriptで描画処理を行えます。以下のような描画を行うAPIが提供されています。 線（直線、曲線） 図形（四角形、円） 色とスタイル（単色、グラデーション、影） 文字の描画（サイズ、フォント、色の指定） 変形（拡大、回転、マトリクス変換） しかし、Canvas描画処理のJavaScript APIはグラフィックス処理独特の記述方法となっており、学習のハードルはそれなりに高いものになっています。 今回紹介するjCanvasは、HTML5 Canvasの機
[JS]かわいくて楽しい！ピクセルベースの3Dグラフィックをウェブページで利用できるスクリプト -Obelisk.js
Online Voxel Builder ピクセルアートをゼロから作成できるジェネレーター。 Obelisk.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="//path/to/obelisk.min.js"></script> </head> Step 2: HTML オブジェクトを配置するcanvas要素を用意します。 <canvas id="canvas-demo" width="1500" height="400"></canvas> Step 3: JavaScript 例えば、キューブだと下記のようなコードになります。 // get DOM or jQuery element // like: $('#canvas-demo') var canvas = document.getEleme
Canvas - HTML5.JP
このコーナーでは、JavaScriptから図を描くことができるCanvasについて解説します。 Canvasとは Canvasとは何か、そしてCanvasで何ができるのかを事例を踏まえて分かりやすく解説します。 Canvasの使い方 実際に、Canvasをどうやって使いこなすのかを、サンプルを通して解説していきます。 いろいろな図形を描く Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 色を指定する このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。 線形グラデーションを指定する このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法
Webアプリをいまどきの手法で爆速開発した — KaoriYa
外道はるかぜちゃんジェネレータというWebアプリを いまどきな手法を用いて爆速で開発した話を紹介します。 先の3連休中、外道はるかぜちゃんジェネレータというWebアプリを開発&公開しました。ここで採用した開発手法がいまどきな爆速開発でしたのでちょっと紹介&ステマします。使った技術は以下の通りです。 AngularJS: Googleが開発しているViewModelなWeb開発ライブラリ(MVW: Model View Whateverだったかな?w) Github pages: スタティックサイトのホスティングに最適 Kii Cloud: mBaaS (mobile backend as a service) で共有データの保存に利用 HTML5 Canvas: 画像生成に。サーバサイドではなにもしてない! サービス概要 外道はるかぜちゃんジェネレータはベースとなる画像があり、そこに面白い
HTML5のCanvasに欠けているもの：フレームワーク － ＠IT
OSSプロジェクトのホスティングサイト「GitHub.com」では、Flashで実装されていた一部のUIをCanvasに移行したという HTML5のCanvasとFlashの最大の違いは、アニメーションなどを行うために利用できる抽象レベルだ――。こう指摘するのは、Gitベースのコードホスティングサービス「GitHub.com」の共同創業者、Tom Preston-Werner氏だ（ちなみにWerner氏はマイクロソフトに買収された検索ベンチャー「Powerset」の元社員で、買収直後に“サラリー以外に3年間で30万ドル（約2770万円）”というおいしいオファーを断ってまでGitHub.comのフルタイム開発の道を選んだことでも知られている）。 Flashで書かれた一部のUIを全面的にCanvasで書き直した経験からWerner氏は、Canvasにはまだ抽象度の高いフレーワムワークが欠けてい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chart.js
JavaScriptグラフィックス
Crafty - JavaScript Game Engine, HTML5 Game Engine
GitHub - nosir/obelisk.js: Build pixel isometric graphics with HTML5 canvas
