JavaScript: ペイントツールの作り方
JavaScriptで簡易ペイントツールを作ってみました。 サンプルコードも掲載していますのでご自由にアレンジして使ってください。 動作サンプル ペイントツール概要 上にあるセレクトボックスで描画色を選択 mousedownで描画開始 mousemoveで描画 mouseupで描画終了 htmlファイル セレクトボックスとキャンバスのタグを記述しています。 セレクトボックスは、行ごとに背景色を設定するようにしています。 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ペイントツール</title> <script type="text/javascript" src="sample01.js"></script> <style> canvas { background-color: green; b
筆圧対応HTML5簡易ペイントツール作ってみた｜NISHIWAKI
Google+でフォローしてる人からPointerEventなるものを教えてもらったのでその機能を使って簡易ペイントツールを試作。オリジナルソースはその人。（改造・拡張した） （全画面版） http://jsfiddle.net/lumis/x9z4t/15/embedded/result/ （ソース付き） http://jsfiddle.net/lumis/x9z4t/15/ 主な機能： ・ペン、エアブラシ（もどき）、消しゴム （グラディエーションペンは未実装） ・IEでもカラーピッカー使用可能にした ・無制限UNDO ・画像出力・保存（状態確認ボタン） ・筆圧対応 ・ペンタブの消しゴム（ペンのおしりの）対応 まあ正直ちゃんとしたペイントツールとは程遠いし、絵描きさんたちがギリギリ困らないレベルの機能しか揃ってないと思うけど、HTML5で筆圧感知してここまで出来るというサンプル程度に認識
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
