| ブログトップ | HTML関連 | JavaScript関連 |

HTML5でお絵かきツール

HTML5のCanvasを使ってお絵かきツールv0.5を作ってみました。

ベースはASCⅡ.jpのこちらの記事を参考に作成。そこに「カラーピッカー.js」や「rgbcolor.js」を投入し、「Canvas Painter」というサイトのソースを参考にさせてもらいながら作りました。

ファイヤーフォックスでしか動かない、レイアウトが雑、ツールの機能がまだ不十分(特に不透明度・ブラシ(ぼかし))など問題点が多々ありますが、一応上げてみます。

お絵かきツールv0.5サンプル [新しいウィンドウで開く] (Firefox3.6以上でのみ正常動作します)

ソースはこちら

※ソースについて

今回、自分で改良したファイルは

  • examples/index.html
  • draw/draw.js
  • rgbcolor/rgbcolor.js (this.toRGBに引数を付け加えただけ)

だけです。

その他については上記で掲載したサイトからダウンロードしたり、載っていたソースをそのまま使用しています。

 

制作にあたり、今回は以下のサイトを参照させていただきました。

HTML5.jp:該当ページ「Canvas」「Javascript ライブラリー

ASCⅡ.jp:該当ページ「HTML5のCanvasで作る、Flash不要のお絵かきツール

もやし日記:該当ページ「色表現を変換するJavaScriptライブラリ - rgbcolor.js

このエントリーをはてなブックマークに追加

LINEで送る

トラックバック

トラックバックURL

コメント一覧

1. Posted by 浅葱   2011年11月09日

はじめまして。

IEでも使えるそこそこ高機能なお絵かきツールを探していました。
ソースコードを参考にさせていただきます。

2. Posted by nandani   2011年11月09日

浅葱さん。

コメントありがとうございます。
かなり前につくった拙いソースですがお役にたてたなら幸いです^^

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記