Canvas#drawImage で縮小した際に綺麗に表示する幾つかの方法 - Qiita
Canvas#drawImage を使ってかなり大きな画像を縮小表示すると、派手にジャギーが発生する事があります。(drawImage のデフォルトのフィルターが速度優先らしく、現状このようになってしまうとか) antialias を効かせるか、もうちょっと綺麗に表示する方法が無いか色々と探ってみました。 方法1. canvasContext.drawImage(source, sx, sy, sw, sh, tx, ty, tw, th) を使って描画する方法 画像1 と 2 の Original がこれです 方法2. HTML5 Rocks にあるように ratio = devicePixelRatio / backingStoreRatio を計算し、canvas のサイズ(width, height)と canvas のviewサイズ(style.width, style.heig
Phaser - A fast, fun and free open source HTML5 game framework
Thousands of games Millions of players Billions of sessions Why use Phaser? For over a decade, Phaser has enabled developers of all skill levels to create games for the web. Use it if you care about any of the following: Super-fast 2D games With a constantly improving hardware renderer, it doesn't matter if you're creating the next bullet-hell hit on Steam - Phaser can handle it. Friendly API We c
JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その1 - Webと文字
○|￣|＿ ＜編集中に記事が消えました…サンプルのみです。 サンプル 青空文庫から宮沢賢治、「グスコーブドリの伝記」をサンプルに選びました（参考資料１）。IE、FireFox、Chrome、Safariで見れると思います。マウスホイールで拡大、縮小が出来ます。 サンプル：グスコーブドリの伝記 参考資料 宮沢賢治 グスコーブドリの伝記 追記：2010/5/17,24 縦組 文字を縦に組み上げることを縦組といいます。以下の資料が詳しいです。 日本語組版処理の要件（日本語版） この文書は，CSS，SVGおよびXSL-FOなどの技術で実現が求められる一般的な日本語組版の要件を記述したものです．この文書は，主としてJIS X 4051（日本語組版規則）に基づいていますが，一部，JIS X 4051に記載されていない事項にも言及しています． 日本語組版では文字は正方形の外枠を持ちます。 これはバウンデ
JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その2 - Webと文字
前回は組版の観点からtypeface.jsに手を入れてみました。 JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その1 - Webと文字 今回はGoogleAppEngineを利用して、サービスの土台を作ります。 フォントサイズの問題 typeface.jsで使用するフォントサイズは、元のフォントサイズの２〜４倍になります。8MBの日本語フォントだと20MB近くになります。これでは手軽に試してみることができません。そこで、任意のサイトの使用文字のみを含んだJSフォントを提供するWebサービスを作ります。 Google App Engine Google App Engine - Google Codeはこういった用途に対して、無料で、手軽に利用できます。参考資料1を参照して、GMAILのアカウントとサービスの登録を行います。途中、携帯電話のメールアドレスが必要になります。サービス
JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その3 - Webと文字
例によってサンプルのみです。Google App Engineでギコ文庫というアプリを作ってみました。 ギコ文庫：http://gikobunko.appspot.com ギコ文庫はWebテキストを縦書き+アンチエリアスで読めるかも知れないサービスです。 URLを入れて実行を押すと、htmlが生成される。 js側の方は調整してないので表示がグダグダなのがわかる。 縦書き用のフォントはIPAフォントのダウンロード || OSS iPediaのIPAexフォントを利用した。ライセンスは詳しく調べてない。問題ありそう。 細かい解説や技術情報は今週末になると思います。あくまでサンプルです。実用に耐えられるようには出来ていません。
JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その4 - Webと文字
前回JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その3 - Webと文字はサンプルのスクリーンショットを貼りました。今回はその解説です。 GAEで作成したアプリ：ギコ文庫 ギコ文庫：http://gikobunko.appspot.com/ Beautiful Soup JSとcanvasで縦組みエンジンを作ろう（ ・∀・） その2 - Webと文字ではminidomを使用してhtmlの解析を行いましたが、今回からそれをやめてbeautiful soup（参考資料1）を使用します。理由は、minidomの解析時間です。 XMLの論考: PythonにおけるElementTreeのXMLプロセス（参考資料2） xml.minidomは、適度な大きさを超えるようなXML文書の処理には向いていないということが明らかになりました。その他は（公正に見て）適切な結果になっています。 参考資
iOS6でメガピクセル画像をCanvasに描画するとおかしくなってしまう件と、その対処 - snippets from shinichitomita’s journal
iOS6によるアップデート まず最初に、iOS6において、Safari上のWebアプリから簡単にカメラ＆フォトライブラリの写真にアクセスできるようになりました。いままでカメラにアクセスするにはPhoneGapなり何なりでネイティブ化する必要があったので、写真共有サービスなどにはかなり有用なアップデートです。 File API、HTML Media Capture への対応 HTML Media Capture に対応し、Safari から カメラを起動してのファイルアップロードが可能になりました。 type 属性値に file を指定すれば単体ファイルのアップロードが簡単に。 （略） ファイルを選択したあとは何ができるか... action による Multipart post Ajax （XMLHttpRequest 2） を使用したファイル送信（プログレス表示にも対応） File AP
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
HTML5 Canvasでパーティクル表現！パーティクルエンジンParticleEmitterJS | ClockMaker Blog
にゃあプロジェクトさんに教えてもらったのですが、HTML5用のパーティクルエンジン「ParticleEmitterJS」が面白そうだったので試してみました。次のような表現がビジュアルエディターを使ってHTML5で簡単に作ることができます。 Demo (Require the browser supported HTML5 Canvas) Demo (Require the browser supported HTML5 Canvas) ParticleEmitterJS は CreateJS のフリーの拡張ライブラリで、簡単にパーティクルエフェクトを作ることができます。パーティクルエフェクトはゲームやコンテンツ表現の演出強化や、雲や炎などのシミュレーションにも利用できます。パーティクルは基本的に数値演算を利用するためプログラマの領分という印象が強いですが、ParticleEmitterJS
CreateJSを使用した際に一部のAndroid4端末でおこる不具合に関して – 水玉製作所
これはCreateJSを使用した際にAndroid4を搭載した一部のスマートフォンで発生する不具合に関する報告である。 概要 CreateJSを使用した際にAndroid4を搭載した一部のスマートフォンで、不具合が発生することがいくつかのブログで報告されている。問題報告と同時に解決策を提示してるブログもある為、それを検証した結果を報告する。 本件に関するブログ 本件に関して触れているブログとして以下のものがある。 (1)まるちゃんブログ CreateJSでハマったこと (2)1 pixel｜サイバーエージェント公式クリエイターズブログ Flashで作るスマフォブラウザゲーム向けアニメーション (3)しょぶろぐ Android4.0とCanvasアニメーションの話 不具合の起こる端末 実際に不具合の起こる端末として以下の名前が挙げられている。[]内の数字は上記のブログの番号を示すものである。
Beautiful JavaScript Charting Library with 10x Performance
Beautiful JavaScript Charting Library HTML5 JavaScript Charting Library with a Simple API and 10x Performance – makes your dashboards fly! Simple JavaScript Charting API 10X Performance 30+ Chart Types Well Documented Supports Chrome, Edge, Firefox, Safari, IE8+ Support Directly from Developers Our HTML5 Charts work with all the popular Libraries & Frameworks like React, Angular, jQuery, ASP.Net,
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アクセラレーション
Animate your HTML5
Accès rapide: ➛ CSS3 ➛ SVG ➛ Canvas ➛ WebGL ➛ CSS shaders précédentsuivant action action = sur la plupart des slides, il se passe quelque chose quand on clique (surtout les slides 4, 9, 19, 31 et 38 :-) Quick access: --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- previous next action action = on most slides, something happens when you click (especially sl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://h2md.axell-embedded.com/
PlayCanvas - The Web Graphics Creation Platform
http://visitmix.com/labs/ai2canvas/index.html
kudox.jp
日本全国花粉飛散マップ Pollen Map in Japan - ICS