Simple-HTML5-Drawing-App - 線種や太さが変えられるWebペイントアプリを作成しよう // MOONGIFT Archived

HTML5では多くのAPIが追加されていますが、見た目のインパクトがあるものと言えばCanvasではないでしょうか。インパクトだけならWebGLもありますが、使いこなすのは難しいかもしれません。今回はそんなCanvasを使ってペイントアプリを作るチュートリアル&ソースコードを紹介します。

Simple-HTML5-Drawing-Appの使い方

一番シンプルなデモです。マウスを使ってペイントできます。

!%5B%5D(open-source-Simple-HTML5-Drawing-App-3.png)

あらかじめアヒルの絵が描かれています。レイヤーによって、ちょっとはみ出ても見えないようになっています。

!%5B%5D(open-source-Simple-HTML5-Drawing-App-2.gif)

こちらがフル実装のデモです。線種や太さ、色を変えられるようになっています。

!%5B%5D(open-source-Simple-HTML5-Drawing-App-1.gif)

ペイントと機能は色々と使い道があります。手書きメッセージを送ったり、写真に手書きメモを書いたりすることもできるでしょう。Simple-HTML5-Drawing-Appを参考にすれば自分だけのペイント機能実装が容易になるでしょう。

Simple-HTML5-Drawing-AppはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。