小粋空間さんのJavaScriptをお借りして自分でも作ってみました。■色を増やすこれは簡単です。<li>の部分を好きなっっっだけ増やせばいいだけ。UIからjquery-ui-1.8.17.custom.zipをダウンロード。解凍するとファイルがいっぱい入ってますが、ここで使うのはjquery-ui-1.8.17.custom.min.jsとjquery-ui-1.8.17.custom.cssです。それを<head>から読み込んで、HTMLとJavaScriptに必要事項を追加。詳しくは参考先サイトを参照。それで描いてみたのが以下です。色と線の太さが選べるようになるだけでもう全然違いますね。ここまできたら更に欲求が高まる。ブラシの種類がもっとあるといいな。失敗した時1つ前に戻れたらいいな。使い勝手ももっとよくしたいな。■ブラシの種類を増やす。これは難しかった...。ダリの雑記:WEBプログラム版の「HTML5でお絵かきツール」を参考に悪戦苦闘。ソースを公開されてるのでダウンロードしてひたすら研究。ここで書くと長くなるので、書き方見本は参考先サイトを参照下さい。試しに自分でもオリジナルブラシを作ってみましたが、とても出来がいいとは言えないのでブラシ類はそのうち改良するかも。■カラーピッカーを付けてみるブラシ参考先サイトで情報を得てHTML5用のカラーピッカーがあると知り、それも付けてみる。これは付け方簡単です。参考先に書いてある通りで何の工夫もいらない。設置したカラーピッカーの色をブラシに使うには$('canvas').mousemoveに以下を追加。細かい諧調を使いたい時に。brushColor;既に用意してあるカラーパレットと両立させるには、$('li').clickを以下のように変更。$('#select_color').val(clic_color);});■戻るボタンを付ける描いててこれは必須だと思った...。完成間近で「あ、間違えた!」をやらかすと叫びたくなります。html5.jpのCnvas頁と首っ引きで何とか設置。$('canvas').mousedownに以下を追加。$('canvas').height());これで描きだす直前の状態を保存できるようです。戻るボタンの動作のために以下を追加。context.putImageData(undoImage,0,0);});HTMLにボタンを追加。/>同じ要領で最新の情報に戻す復元ボタンも作れますね。■canvasの背景色切り替えHTMLにボタンを作って、JavaScriptの適当な所に以下を追加。$('canvas').css('background-image','url(back.gif)');});これはおまけです。描いた絵はPNGで保存できますが、PNGには透過情報があります。そのため描かれてない部分は透明になります。これに気付かず白ブラシを消しゴム代わりに使うと白背景では左のように見えても...。透過に対応したソフトで開くと右の状態になっちゃってます(消したつもりが白で塗ったことになってる)。白背景で完成させるならこれでかまいませんが、透過を生かしたい時は白ブラシではなく消しゴムを使わないといけません。背景色を切り替えることで、どの部分が透明になってるかを確認できます。透明画像を使った背景はPhotoshopで開いた時のシミュレーション用です(限りなく自分仕様;)。後は細かい使い勝手とHTMLとCSSを整えて、出来上がったもので描いてみたのが以下。塗っただけですが、前回とのブラシの違いによる塗りのサンプルとしても見ていただければと思います。設置サンプルはこちら。描いてると「スポイトツールが欲しい」「レイヤーも欲しい」「タブレットの筆圧に対応・・・」とか更に欲求高まりますが、そこまで望むなら素直にPhotoshopかPainter使えよという気もするのでこれくらいにしておきます(^^;。いう簡易なツールはさっくりと楽しむのがいいですねー。参考にさせていただいた皆様、ありがとうございました。間違いがありましたら教えて下さい。追記>スポイトを追加、カラーパレットとカラーピッカーを連動させました。追記>透明度の設定を追加しました。23:17こんなのでよかったら遠慮なく使ってやって下さいね。(非表示です)URLこの情報を登録しますか?<注意>ご利用のブラウザ、設定ではコメントのプレビューおよび投稿はご利用になれません。コメント投稿の際はお手数ですがjavascriptをオンにして下さい。*javascriptオフのまま投稿ボタンを押すと送信内容が消えますのでご注意下さい。