タグ

canvasに関するd_akatsukaのブックマーク (2)

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

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

    rails3 + html5 canvasでお絵かき投稿サイトを作ろう!
  • paper.jsでインタラクティブなグラフを描こう - Preferred Networks Research & Development

    canvasベースのベクターグラフィクス描画用jsライブラリとして、既に各所で紹介されているpaper.jsですが、これを、ウェブに載せるグラフの描画に使ってみましょう、というお話です。 paper.jsではパスをつくって描画をしつつ、パスに対するhit testも可能ですし、アニメーションも実装することができます。プロジェクトサイトではオシャレなサンプルが多数掲載されていて、paper.jsで何ができそうなのかを簡単にざっくりと知ることが出来ます。 javascriptでインタラクティブなグラフを、というとGoogle Chart Toolsなど、既存のグラフ用ライブラリを使って簡単に済ませることもできますが、ひと手間加えて独自性のある表現を出したい場合は、paper.jsのようなライブラリを使ってみると良いかと思います。 試しにpaper.jsの学習がてら、下記リンク先にあるような棒グ

    paper.jsでインタラクティブなグラフを描こう - Preferred Networks Research & Development
  • 1