[HTML5] Canvas勉強メモ #2「お絵かきツール」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

canvasを触っていて、この機能を使えばお絵かきツールが作れるのでは?と考えていたトコロ、
いろいろなサイトでそういったプログラムが紹介されていた。
とりあえず、ドットインストールで紹介されていた「お絵かきツール」をそのまま作ってみました。
canvasでお絵かきツール

まるコピなので、ここから改造してオリジナリティを出すも良し、何かのサービスに組み込むのも良し。

ソースコード

index.html

canvas.js

確認

スクリーンショット 2016-01-12 0.06.09

無事に動作確認ができました。
canvasを使ってpng画像の作成まで行えるツールですが、使いみちはあまり無さそうです。
ここから画像解析などできると使いようはあるかもしれませんが・・・

サンプル

お絵かきツールサンプル

とりあえず、ソースコードも簡単なので、laboエリアに載せておきたいと思います。
ソースのコピペなどに使ってください。

Links

[HTML5] Canvas勉強メモ #1「基本構造」
[HTML5] Canvas勉強メモ #2「お絵かきツール」
[HTML5] Canvas勉強メモ #3「アニメーション」

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です