humble software development - flotrHumble software development provides JavaScript, HTML5, Canvas and information search and retrieval software development.
rails3 + html5 canvasでお絵かき投稿サイトを作ろう！
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
html2canvas - Screenshots with JavaScript
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」:phpspot開発日誌
html2canvas - screenshots with JavaScript JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」 サーバサイドでブラウザを動かしてスクリーンショットを取るというより、利用者のブラウザ上でスクリーンショットをJavaScriptとcanvasを使って生成しちゃおうというものらしいです。 canvas非搭載ブラウザはflashcanvasやExplorerCanvas等の代替が必要とのこと。 html2canvasでレンダリングされたサンプルも見ることが出来ます。 frameやobjectのサポートはしていない点に注意。 スクリーンショットを取る仕組みをサーバに仕込むとタイムラグがあったりサーバ側は大変だったりで色々問題点を抱えていますが、クライアント側でやれば画像を受け取るだけでいいので便利です。 クライアントごとの表示
potraceをjavascriptに移植した - Webと文字
生存報告 （ ^ω^）とりあえず生きてます。 potraceとは potraceとはラスター画像からSVG等のベクター画像を作成するソフトです。無料で使えてソースも公開されているオープンソースなソフトです（参考資料１）。元はCで書かれていますが、python、ActionScript、C#に移植されていたりします。 だから何ができるの？ 左が元のビットマップ画像、右がそれをpotraceでトレースした画像 C→javascript(´・ω・`)、ActionScript→JavaScript(ﾟ∀ﾟ) ActionScriptとJavaScriptは兄弟みたいなものなので移植はとっても簡単です。今回は参考資料２をパクって参考にしてjavascriptに移植してみました。 処理フロー imgタグで画像を読み込み 画像をcanvasに転写 画像をグレースケールに変換 画像を二値化 画像の輪郭の
Music can be fun - Edan Kwan
The annoying background will show up once you hit on the red ball. Hit a blue ball to get rid of it! This is an experimental HTML5 app for the Dev Unplugged contest. This app used a lot of canvas and svg elements and you can see the amazing visual effects on your plug-in free browsers. I strongly recommend you using Internet Explorer 9 to experience the power of the hardware acceleration. My name
Heartcode CanvasLoader Creator | Smarter than an animated GIF
Heartcode CanvasLoader UI Library The Heartcode CanvasLoader is a lightweight JavaScript UI library, which can be used to create spinners using the HTML5 Canvas object in modern browsers, or VML in older ones. The main advantages of CanvasLoader It uses Canvas in modern browsers and VML for IE6/7/8 Flexible and highly customisable Fully transparent and resolution independent No dependencies; No ex
Rails3.1の初期化プロセスを細かく追いかけたRailsGuidesの記事を和訳したよ:ミームの死骸を越えてゆけ
This domain may be for sale!
Multiuser Drawing Pad Built with Pure JavaScript/HTML5/Canvas • The Union Platform, By USER1
This example shows how to create a simple multiuser drawing pad (aka shared whiteboard, multiuser sketchpad, or collaborative painting tool) using pure JavaScript and HTML5's <canvas> tag. The drawing pad updates in realtime when any connected user draws a line. Here's UnionDraw. Have a scribble! [View source] To manage communication between users, the JavaScript code uses OrbiterMicro, which conn
ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」:phpspot開発日誌
heatmap.js | HTML5 Canvas Heatmap Library ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」。 ユーザのマウス位置をヒートマップという形で表示してサイトの利用方法を解析する方法がありますが、そのヒートマップを描画できるライブラリが公開されています。 取得されたデータを元にヒートマップを描画できるのは当然ながら、マウスを動かしてリアルタイムにブラウザに描画されるデモも一見の価値があります サイト上の以下のボタンを押しましょう。 リアルタイムでヒートマップが描画されます。Chromeだととってもなめらか アクセス解析的な利用はモチロンのこと、何か他のものにも使ってみると面白い効果が得られたりするのかも。 関連エントリ クリック位置のヒートマップを作成できるオープンソースやサービス色々
livedoor Techブログ : 第五回ライブドア・テクニカルセミナー ログ
2011年2月26日（土）に開催されました 第五回 ライブドア・テクニカルセミナー の発表資料と動画を公開致します。ご参加頂きました皆様、どうもありがとうございました。 「開発者から見たAndroidとiOSアプリの違い」(佐孝 太郎 株式会社ライブドア) 「HTML5で動くFlash Playerを作ってみた」(紀平 拓男 氏 株式会社 ブロードテイル) 「対談: 新進気鋭のSAPに聞いた現場事情」(石井 武 氏 株式会社オルトプラス/ 聞き手 伊勢 幸一 ) 「スマートフォン向けソーシャルアプリケーション開発の現在」伊藤 直也 氏 グリー株式会社) 講演1「開発者から見たAndroidとiOSアプリの違い」 株式会社ライブドア 開発部開発2G（スマートフォンチーム） 佐孝 太郎（約21分） 1/2 2/2 概要： 「スマートフォン」でひとつに括られるAndroidとiOSですが、
HTML5のキャンバスと連動させて音声をビジュアライズしたデモ:phpspot開発日誌
Music Visualizer in HTML5 / JS with Source Code HTML5のキャンバスと連動させて音声をビジュアライズしたデモ Windows Media Player とかを使ってるとよくあるあの動くやつをHTML5のCanvasを使ってやるものです。 ベースにはEasel.jsというものが使われており、HTML5のキャンバス描画を行っているそう。 直接的にHTML5からオーディオのボリュームデータは読めないため、データを一旦テキストにしてそれを読み込むことで実現しているそう。 実際のデモを見るのが一番いいですね。デモページ デモページその２ バックグラウンドの音声もかっこいいわけなのですが、描画される映像もかなりかっこいいです。 関連エントリ HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 HTML5のCanvas
canvas の getImageDataが少しめんどくさい（特にローカルで動かす場合） - 地平線に行く
egg (JavaScript Effect Library)にモザイクイン・モザイクアウトを追加しました。 egg とは？ HTML5 の canvas を使った画像エフェクトライブライブラリです。 まだ数は少ないですが、結構きれいなエフェクトがかかります。 Firefox, Google Chrome をご利用の方は、ぜひ下記のページからサンプルをご覧ください。 Ver0.1.1の変化点 モザイクイン・モザイクアウトを追加 ダウンロードとサンプルは こちら(egg (JavaScript Effect Library)) からどうぞ！ 今回追加したエフェクトで、初めて canvas の getImageDataを使いました。 ピクセル単位で色を扱えて便利かなーと思ったんですが、少し扱いがめんどくさかったです。 1．ピクセルデータはキャンバスからしか取得できない 画像から直接 getIm
Canvas + File API + Drag&Drop API で Instagram みたいな画像フィルターを作ってみた - hakobera's blog
Instagram の画像フィルターみたいことを HTML5 (Canvas + File API + Drag&Drop API) で実装してみました。 Instagram みたいなの - jsdo.it - Share JavaScript, HTML5 and CSS 動作するブラウザは FireFox 3.6、Chrome 8 開発版です。(Chrome 7 は File API はサポートしていますが、どうやら iframe 内では動作しないため、上記 jsdo.it 上では動作しません。) できること これを こんな風に加工できます。 大学時代に画像処理の研究をやっていた身としては、ブラウザだけでもここまで出来るようになったのか、と少し感慨深いです。 やっていること Drag&Drop API で画像ファイルを取得 File API で画像ファイルを DATA URI 形式に変
canvasが手軽にウェブで試せるアプリFirstCanvasを作ったよ - 三等兵
http://sandai310.com/firstcanvas/ canvasをウェブで簡単に体験できます。 canvasの素晴らしい日本語リファレンスはありますが、 http://www.html5.jp/canvas/ref.html 少し難しいのでイメージがわきません。じゃあ触って試せばいいじゃーんてことですが、イヤだめんどくさい！という動機で簡単にウェブ上で試しながら機能が確認できれば楽だなってことで習作として作りました。 とりあえず位置付けとしてはcanvasの学習アプリってところで。 コンセプト 誰でも手軽にウェブでcanvasのプログラミングができる、というコンセプト。たぶん誰でもできると思います。適当に見よう見真似でいじいじできますのでいじいじしてください。できなくてもいじいじいじけないでいじいじしてください。実はいじいじ言いたいだけです。 できること canvasで使え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
More preview enhancements for Windows Azure AD Premium - Active Directory Blog - Site Home - TechNet Blogs
Frank Hernandez
Paper.js
Welcome!
5509.me