Canvas Paint Tool

HTML5 + JavaScript アイデア&実践サンプル古籏一浩氏)の「Flash不要のお絵かきツール」より

Canvasを使ったお絵かきツールです。書籍の流れに従いながら、順次機能を増やしながら製作しています。

ライブラリーやjRueryを使用せず作っています。

マウスを動かすと描画(Canvasの位置を下げたため座標のズレを修正。CSS追加)

マウスボタンを押すと描画

点と点を線で滑らかにつなぐ(変数dragFlagの判定位置を変更)

画像をファイルに保存する(ライブラリー不使用)

ブラシの色選択(jQuery不使用。ローカル変数をグローバル化)

ブラシのサイズ変更(jQuery不使用)

戻る