[B! JavaScript][canvas] korooooonのブックマーク

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

korooooon 2014/05/22

リンク

Canvas に描いた画像を png などの形式の Blob に変換する方法

canvas の DOM エレメント (コンテキストではない) から toBlob() を使う、というのが一番簡潔な回答です。が、これは Firefox には実装されているのですが、残念ながら Chrome にはまだ実装されていません。そこで下記の方法を使って png や jpeg など、任意の画像形式で Blob を作ることができます。 /*** canvas に絵を書くコード ***/ var type = 'image/jpeg'; // canvas から DataURL で画像を出力 var dataurl = canvas.toDataURL(type); // DataURL のデータ部分を抜き出し、Base64からバイナリに変換 var bin = atob(dataurl.split(',')[1]); // 空の Uint8Array ビューを作る var buf

korooooon 2013/09/09

リンク

FlashVHtml – Home

Understanding the Pros and Cons of Flash and HTML in Modern Web Development For many years, two of the most commonly utilized and well-liked online techno logies have been Flash and HTML. Although they are both necessary tools for producing dynamic and interactive web content, their methods and capacities differ greatly. This essay will look at the main distinctions between HTML and Flash as well a