[B! canvas] cronecoのブックマーク

HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！

動くぞ！きれいだぞ！ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、ユーザー数 5万人を突破しました！（わーい！）今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！説明不要！気になったコードは是非のぞいてみてください！

croneco 2012/12/11

リンク

rails3 + html5 canvasでお絵かき投稿サイトを作ろう！

はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。初めてブログ記事を書くということで気合が入りました。ちょっと長めですがお付き合い下さい。機能お絵かき投稿サイトの必要最低限な機能って？ざっと下のような機能を入れてみます。絵を描ける絵を消せる描画を一回分戻れる線の太さを変えられる線の色を変える絵を投稿できる投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、・mousemoveイベント発生時に点をプロットという手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。これではお話になりません。なので、点ではなく線を引くこ

croneco 2011/11/14

html5
canvas

リンク

JavaScriptとHTML5 Canvasを使って顔認識するコードがすごい:phpspot開発日誌

Badass JavaScript - Face Detection in JavaScript via HTML5 Canvas JavaScriptとHTML5 Canvasを使って顔認識するコードがすごいです。 ccv.jsとface.jsというファイルがGitHub上で公開されていて、認識自体をJavaScriptでやってしまっているようです。 JavaScriptが高速化するにつれ、WEBはもっと高速に、サーバにも優しくなっていく流れになっていきそうですね。 GitHubでは２つのJSと１枚のHTML、１つのPHPコードが配布されています。 ccv.jsがコアで、face.jsは定義ファイルっぽいです。画像を外部から呼び出すためのプロクシ用にphpを使っていますがphpでOpenCVを使ったりはしていないようです。関連エントリ PHPでOpenCVなしのピュアPHPで顔認識す

croneco 2010/11/04

リンク

JSPainter runs except IE

Painting application that is purely mad with JavaScript. It doesn't run with Internet Explorer. Please use Chrome, Safari, or Firefox. 100% JavaScript で制作されたお絵描きアプリです。Internet Explorerでは動きません。 Chrome, Safari, Firefoxにてご利用ください。 Day1: 2010/09/20 08:30 Project start. 06:00 Released First Version. 17:00 Redo is supported. 19:00 Zoom is supported. 23:00 Now you can scroll zoomed thumbnail. Day2: 2010/0

croneco 2010/10/17

リンク

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