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
クロスドメイン画像はピクセル操作できない - NullPointer's
HTML Canvasでクロスドメイン画像のピクセルを加工することはできない。 クロスドメインの画像をdrawImageすることはできる。しかし、クロスドメイン画像をdrawImageしたcanvasからgetImageDataしようとするとエラーになる。 $("<img>").attr("src", "http://www.hatena.ne.jp/users/pa/paulownia/user.jpg").load(function(){ var canvas = document.createElement('canvas'); canvas.width = this.width; canvas.height = this.height; var c = canvas.getContext('2d'); c.drawImage(this, 0, 0, this.width, this
jQueryでcanvasを扱うときは画像読み込みのタイミングに注意 - NullPointer's
jQueryの $(function(){ ... }) は、ページの load イベントではなく、DOMContentLoaded というイベントをトリガにして実行されます（Firefoxの場合）。このイベントはHTMLファイルがロードされDOMツリー構築が終了したときに実行されます。画像などの重いコンテンツのロードが始まる前に実行されるため体感速度が向上します。 しかし、以下のようにDOMContentLoadedをトリガにしてページ内の画像をcanvasで処理しようとすると、まだ画像が読み込まれていないためエラーになることがあります*1。 $(function(){ $("img").each(function(){ var canvas = document.createElement('canvas'); var c = canvas.getContext('2d'); c.dr
JavaScript によるオーディオ＆ビジュアルプログラミング - Radium Software
僕は JavaScript が好きだ。できるだけ多くのことを JavaScript で済ませてしまいたいと考えている。 以前は JavaScript では絵や音を扱うことができないという点がボトルネックになって，応用の幅を狭めていた。これが最近になると， Canvas 要素のおかげで絵を扱うことができるようになったり， Flash を代行役にすることによって音を出せるようになったりと，いろいろ状況が変わってきている。 そこで今回は，以前から機会があれば触ってみたいと思っていた Processing.js と SoundManager 2 を使って， JavaScript によるオーディオ＆ビジュアルプログラミングに挑戦してみた。 Processing.js とは Processing.js は，ビジュアルデザイン向けプログラミング言語 Processing を模して作られた JavaScr
JavaScriptで画像のオフラインキャッシュを実装する - KAYAC Engineers' Blog
もうすぐクリスマスシーズンなんですかね？本間です。 巷で話題のイケメンホイホイ（以下イケホイ）ですが、このたびiPhone用サイトがオープンしました。 それにあわせて新機能も搭載！イケメン写真にタグを付ける機能と、iPhoneでぼんやり眺めているだけで楽しいビューア機能です。 タグ機能はPC版にも搭載されましたので、ぜひぜひみんなで色んなイケメンにタグを付け合ってくださいね。 タグが付くことで、オススメの精度が上がりますよ！ ビューア機能は、自分がゲットしたイケメンズがiPhone上で次から次へと表示される機能です。 オフラインでも表示できる機能付き！ 電車の中で見るも良し、卓上に置いて眺めるも良しです。 あなた好みのイケメンがゾロゾロ。イケメンホイホイのサイトはこちら！ …うーん、ユーザ層がかぶらなそうだな、この記事。 さてさて、本題はHTML5の機能を使った画像のオフライン表示について
JavascriptとCanvasによるファミコンエミュレーター
JSNES: A Javascript NES emulator JavascriptとCanvasを使ったNES(ファミコン)エミュレーターを実装したと主張している。Chromeならば、パフォーマンスも申し分ない。 にわかに信じられないが、どうやら本物らしい。 もし本当だとしたら、本物のROMを使用しているようなので、合法ではないのであまり深く追求しないが、ソースをみる限り、本当にエミュレーターを実装しているらしい。サイトの説明によると、vNESというエミュレーターを、JavascriptとCanvasを使うように移植したのだとか。 ところで、もし本物だとして、本当に本物のカートリッジからダンプしたROMを使っているのだとして、一体どうやってJavascriptからバイナリファイルを扱うんだろうと思って調べてみた所、どうやら、バイナリファイルではなく、スラッシュ区切りの十進数文字列にして
CanvasでParticles(Sand) - os0x.blog
「HTML5のcanvasで作る画像フィルター」は自分ならこう書く - by edvakf in hatenaとCanvasでローレンツアトラクタ - by edvakf in hatenaに刺激されてCanvasネタを1つ。といっても以前やったOperaのCanvasでParticles(Sand/Snow) - 0xFFの焼き直しです。 canvas sand (例によって劇重注意) Chromeで見ると良い感じだと思います(ただし、Chromeは容赦なくマシンリソースを使うのでPCが不安定になるかも…)。一応、uupaa-excanvas.jsを読み込んでいますが、IEのcreateImageDataはサポートされていないので、動作しません。Operaでも動くはずなんですが、基本動かないっぽいです…。リロードしてるとたまに動きます。よくわからない…。ただのキャッシュ問題でした… すご
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
