Chrome 上で、Canvas API のダンプ、Draw call の可視化、スナップショットが取れる Canvas Profiles が超便利なのでご紹介 - latest log
Chrome には Canvas API の発行状況を可視化してくれる Canvas Profiles が搭載されています（1年ぐらい前からありました)。 これは特定の業種の人(特にCreate.jsとかPexJSを使ってる方々)にとっては神の如きツールであり、知らないと勿体ないのでシェアしますね。 ユースケース (つ◇⊂) 「Canvas のページが重いよ〜 ドラえもん〜」 (ε・◇・)っ はい、Canvas プロファイラー (つ◇⊂) 「描画が崩れる原因がわかんないよ〜 ドラえもん〜」 (ε・◇・)っ はい、Canvas プロファイラー です。 おまけ 機能自体は去年の7月ぐらいから利用可能で、その間にUIが何度かマイナーチェンジしていますね。 あと、プロファイルデータを右クリックすると Load 機能はあるけど Save 機能がないので、 Google Dev Summit 2013
canvasのgetImageData(), toDataURL()などにおけるCORSについて - 愛と勇気と缶ビール
僕のcanvas力はいまだ中学生男子並みなので、そもそもcanvasの一部のAPIにSame Origin Policy的なものが適用されることすら今日まで知らなかったのですが、どうやら 違う生成元がsrcに指定されているimgをputImageData -> その描画領域をgetImageDataしようとするとDOM Exception という感じに、普通に怒られちゃうみたいですね。知らんかった。 http://www.w3.org/TR/cors/#use-cases ↑のあたりに書いてあるのをみると、taintedなcanvas、というのですかね。getImageDataで同じ生成元から読み込んだimgの描画部分を指定しても怒られないけど、違う生成元の画像を描画した部分に少しでもかかっていると怒られるので、canvasってピクセルごとに "taintedか、そうでないか" を管理して
faviconの色をcanvasで変える - 0xff.toBlog()
github と github:enterpriseさんのfaviconが見分けがつかないので、Chrome拡張で差し替えることにしました。 画像どうしようかとちょっと悩んだけど、色変えるだけでいいだろうとFireworksを起動するも、色を良い感じに変える方法がわからない…。 元が の通り、白黒なので、トーンカーブ的なものではダメそうで、諦めてcanvasでやることにしました。 var favicon=document.getElementsByTagName('img')[0]; var cv = document.createElement('canvas'); cv.width = 16; cv.height = 16; document.body.appendChild(cv); var c = cv.getContext('2d'); c.drawImage(favicon,
canvas の getImageDataが少しめんどくさい（特にローカルで動かす場合） - 地平線に行く
egg (JavaScript Effect Library)にモザイクイン・モザイクアウトを追加しました。 egg とは？ HTML5 の canvas を使った画像エフェクトライブライブラリです。 まだ数は少ないですが、結構きれいなエフェクトがかかります。 Firefox, Google Chrome をご利用の方は、ぜひ下記のページからサンプルをご覧ください。 Ver0.1.1の変化点 モザイクイン・モザイクアウトを追加 ダウンロードとサンプルは こちら(egg (JavaScript Effect Library)) からどうぞ！ 今回追加したエフェクトで、初めて canvas の getImageDataを使いました。 ピクセル単位で色を扱えて便利かなーと思ったんですが、少し扱いがめんどくさかったです。 1．ピクセルデータはキャンバスからしか取得できない 画像から直接 getIm
HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。 - 風と宇宙とプログラム
はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
