ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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)です。

Create a Drawing App with HTML5 Canvas and JavaScript { William Malone }

williammalone/Simple-HTML5-Drawing-App: Simple drawing application created with HTML5 canvas and JavaScript

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch