【HTML5】Canvasで簡単なペイントツールでも

こちらでは久々の更新です。
現在、私は就活に追われながら大学の卒業研究を進めている最中です。
私が所属する研究室で一人内定者が出たというグッドニュースがありましたが、私は依然として内定は出ていません・・。
まぁ、まだ5社くらいしか受けていないので、諦めてはいません。

ですが、この頃何事に対してもモチベーションが上がらない・・それどころか下がりがちな傾向にあります。
内定者が出ることは大いに結構ですが、所詮他人が得た物・・自分が得られなければ意味がありません。
そんなこともあって、モチベーションを上げるキッカケとなるものを模索中です。

スポンサードリンク

さて、そんな中私はWeb関連の研究に着手しているので、まずは最近注目されているHTML5について勉強してみることにしました。
その一環として、HTML5の要素の一つであるCanvasを使って、簡易ペイントルールでも作ってみることにしました。
とはいえ、現段階ではサイトの解説通りに作っただけですが・・・。

Ascii.jp古籏一浩のJavaScriptラボに掲載されている記事を参考に、見よう見まねで作ってみました。
とりあえず、Canvas上での描画からスライダーでのブラシサイズ調整機能の実装までやってみました。

SS_C
SSで申し訳ないです。実際のページはサーバーに上げていないので、このような形での掲載となってしまいました。
ちなみに、これにはjQueryも使っています。

今後は、これをベースに、レイヤーや消しゴム等の追加、色の追加などを行っていこうと思っています。
出来れば、カラーパレットをPhotoshop風の物にしてみたいところです。
ではでは。

※2011/11/7追記
画像のリンクが切れていたのを修正しました。

スポンサードリンク
Pocket

Comments are closed.