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
Open Source HTML5 Game Framework For over a decade, Phaser has enabled developers of all skill levels to create games for the web. Phaser Editor Phaser Editor enables you to visually create Phaser games. Instead of entering numbers in your code to position Game Objects, you can drag and drop them into place, tweak their animations, adjust their physics bodies, enable special effects and more. It's
TensorFlowでのMNIST学習結果を、実際に手書きして試す - すぎゃーんメモ
Deep Learningという言葉を色んなところで聞くようになり、Googleからも TensorFlow というものが出たし、そろそろちょっと勉強してみるか〜 ということで初心者が機械学習に手を出してみた。 TensorFlowのtutorialを見てみると、まず最初に「MNIST」という手書き文字の識別問題が出てくる。その問題に対して、こういうモデルを作ってこうやって学習させていくと91.2%くらいの識別率になります、さらに飛躍させてこういうモデルでこうやって学習させると99.2%くらいまで識別率が上がります、とか書いてあって、確かになるほどーと数字で納得もできるのだけど、せっかくなら実際にその学習結果を使って自分の書いた数字を識別してもらいたいじゃないか、ということで そういうのを作ってみた。 https://github.com/sugyan/tensorflow-mnist c
写真サービス機能のブラウザ内実装 | 株式会社サイバーエージェント
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
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文書の処理には向いていないということが明らかになりました。その他は（公正に見て）適切な結果になっています。 参考資
msto.jp - it転職 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
HTML5 Canvas Drawing Lines with Smooth Edges - Code Theory
In the previous post we kicked off with our painting application using HTML5 canvas. If you remember well, we ended up with a basic app where one can easily draw lines or something else with a “pencil” tool. But there was a problem. When drawing different shapes like circles, the lines/curves had jagged edges. They were not smooth or anti-aliased, whatever you want to call them. This article will
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
canvasを全画面に表示する | 2GRAVITY
canvasをウィンドウサイズいっぱいの背景に固定したい場合や、フルcanvasのコンテンツを作成したい場合用のメモ。 canvasはjavascriptを利用してサイズ指定、リサイズ処理を行います。 ※下記コードはjQueryの利用を前提に書いています。 【html】 <body> <div id="wrapper"> <canvas id="main"></canvas> </div> </body> 【css】 body{ margin: 0px; padding: 0px; position: relative; } body #wrapper{ width: 100%; height: 100%; position: fixed; } 【js】 $(function () { sizing(); $(window).resize(function() { sizing(); })
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる - jsdo.it - Share JavaScript, HTML5 and CSS
Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる、最悪OSが死ぬ。 拡大縮小どちらもダメっぽい。 ※ OSが死んだ場合はバッテリーを外すしかなくなるので自己責任で。 ▼検証端末 問題なし ・GALAXY S3α（SC-03E） Android 4.1 ・INFOBAR A02 Android 4.1 ・HTC J（SW13HT） ・AQUOS PHONE si（SH-01E） デフォルトブラウザが落ちる ・Xperia Z（SO-02E） Android 4.1.2 ・Xperia VL（SOL21） Android 4.0.4 ・Xperia GX（SO-04D） Android 4.0.4 ▼回避案 ・Canvas ではなく Container 側をリサイズ、はみだす部分は css でトリミング ・全体的にボケる ・大きめの Canvas を用意するため負
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://h2md.axell-embedded.com/
PlayCanvas - The Web Graphics Creation Platform
http://visitmix.com/labs/ai2canvas/index.html
tezawaly.jp - ニュース リソースおよび情報
http://kudox.jp/java-script/createjs-easeljs
