ダリの雑記:WEBプログラム版

 
Javascript関連
Javascriptに関する覚書やサンプルのコード・実行例などを記述しています。
Javascript関連
Javascriptに関する覚書やサンプルのコード・実行例などを記述しています。
 
CMS関連
MTやWordPressなどのCMSに関する覚書やサンプルコードを記述しています。
CMS関連
MTやWordPressなどのCMSに関する覚書やサンプルコードを記述しています。
 
CSS関連
CSSに関する覚書やサンプルのコード・実行例などを記述しています。
CSS関連
CSSに関する覚書やサンプルのコード・実行例などを記述しています。
 
趣味や日常の出来事を書き綴った「ダリの雑記:趣味・日常版」へ。
趣味や日常の出来事を書き綴った「ダリの雑記:趣味・日常版」へ。

| ブログトップ | 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

Check  

ブックマーク : このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

トラックバック

トラックバックURL

コメント一覧

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

はじめまして。

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

2. Posted by nandani   2011年11月09日

浅葱さん。

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

コメントする

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

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