タグ

webとcanvasに関するHeavyFeatherのブックマーク (6)

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

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

    rails3 + html5 canvasでお絵かき投稿サイトを作ろう!
  • HTML5花火大会から学ぶcanvasの表現力

    HTML5花火大会が始まりました! jsdo.itに集まった400以上の花火コードが、夏の夜空に打ち上がっています! 当にどの花火もクオリティーが高くて、見るだけでも楽しめます。 HTML5花火大会 花火のコードから学ぶcanvasの表現力 花火のコードの大半はHTML5のcanvas要素を使って描画されています。 canvasってなんだっけ? javascriptから自由にグラフィックを描画できる要素です。 以下のエントリーにわかりやすくまとまっています。 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル(かつ動的な)表現が行えるわけです。 今更聞けないcanvasの基礎の基礎 canvasで花火を描くには? 花火のお手コードから見ていきま

  • サーバサイドでCanvasを利用する(node.js)

    こんにちは、中川です。 今年も残すところあと1週間をきりましたね。 このところ色々と忙しかったので年末年始はゆっくりとしたいと思います。 さて、今回の話題ですが、node.jsを使ってサーバサイドでCanvasが利用できるということで試してみました。 それでは、早速使ってみましょう。 ■今回の環境 Ubuntu 10.10 node.js v0.3.1 npm 0.2.12-1 node-canvas v0.4.1 ■インストール node-canvasでは、cairoを利用しますので、事前にインストールします。 // sample.js var Canvas = require('canvas') , http = require('http'); http.createServer(function (req, res) { var canvas = new Canvas(200,20

    サーバサイドでCanvasを利用する(node.js)
  • 帰国します!

    Big Canvasを退職し、11月1日に日に帰国する事にしました。 PhotoShareなどのサービスは、引き続きBig Canvasが運営し、サーバなどのメンテナンスはUIEが引き継ぎ、今まで通り運営されますので、引き続きご愛顧のほどよろしくお願いします。 2008年3月に渡米し、7月にPhotoShareをリリースして以来、多くの人に支えられサービスを運営できた事を、非常にうれしく思っています。ありがとうございました。>ユーザの皆様 帰国後の予定は未定ですが、もし東京近郊で年800万以上(希望1,000万円以上)で誘って下さるところがありましたら masui@masuidrive.jp までご連絡いただけるとうれしいです。 ざっくりした職歴は、LinkedInに掲載しています。2年半アメリカにいましたが、英語は役に立たないと思ってくださいw 11/20のRailsDevConでは、

  • まずは基本から・HTML5のCanvasについて参考になったサイトまとめ - かちびと.net

    この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマしたのでこれから学ぼう、とお考えの方とシェアしたいと思ってエントリー。 というわけで、基的な情報がほとんどです。大量の情報を見ても混乱するのである程度絞っています。 html5.jp リファレンスサイトです。リンク先はcanvasカテゴリに。ここからスタート、というか最後までたぶんお世話になりそう。 html5.jp ~HTML 5で導入されるcanvas

  • Chart Demo (WebFX)

    A few demonstrations of the chart competent, using the CanvasChartPainter painter implementation. Tested in Mozilla Firefox 1.5, Opera 9 and Internet Explorer 6 however any browser with JS, DOM and Canvas support should be able to handle it. Internet Explorer requires a canvas implementation, such as the Novell XForms plugin or the IECanvas emulation script (used here). Stacked Area, Line and Bar

  • 1