HTML5

HTML5 videoでリアルタイム顔認識

以前、、ビデオのリアルタイムなヒストグラム表示を作ってみたが、思ったより高速だったので、もっと処理の重いものをやったらどうだろうと思い、JavaScriptで書かれた顔認識ソフトを利用して、ビデオに対してどのくらい可能なのかを試してみた。JavaScript…

HTML5 Videoの対話的実行ツールを作ってみた。

新しいことを覚えて自分のものにする最も確実な方法は、自分の手を動かして実際に確かめることと思っています。新しいプログラミング言語を覚えるときも、ただ単に本を読んでいるだけではなかなか身につきませんが、実際にキーボードを叩いて結果を確認する…

HTML5でビデオのリアルタイムヒストグラムを作ってみた

デジカメを使っていると、撮影直後にヒストグラムを見て黒潰れや白飛びなどをチェックする癖がちょっとは身についたが、デジカメはもちろんのこと、今時のテレビにもヒストグラムをリアルタイムで表示する機能が付いているものもある。今回、HTML5のvideoタ…

HTML5 LogoをCanvasで描いてみた

かっこ良いんだか悪いんだか、ちょっとわからないけど、HTML5のロゴができたということなので、ちょっと遊んでみた。CCライセンスで提供されている。SVGデータもあるので、中身を見たところ、これならすぐにCavnasでも描けそうだと思い立ったので、帰宅電車…

Canvasのベンチマークテストを作って速度を比較してみた

はじめに Canvasのパフォーマンスを測定するベンチマークプログラムはそこら中に転がっていますが、ほんの一部分の測定だったり、逆に中身が複雑過ぎたりと僕が希望するようなものが見当たらなかったので、自分で作って各ブラウザで測定してみました。測定し…

Canvasのイメージ拡大描画について比較してみた

CanvasのdrawImage APIは下図のように、ソースイメージ中の任意の矩形領域をCanvas領域中の任意の大きさの矩形にマッピングできます。 context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) このAPIによって、イメージの部分領域の縦・横方向の拡大縮…

HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。

はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。調べたブラウザの各バージョン…