JavaScript|お絵かきソフト
JavaScriptによる簡単なお絵かき
事例1 マウスで線を描く →DEMO
マウスの位置情報を用いたシンプルなお絵描きです。index.html、style.css、sample.js の3つのソースコードをそれぞれテキストエディタにコピー&ペーストして、見出しにあるとおりのファイル名で同じフォルダに保存すれば、ローカルで動かすことができます。
注) Web標準ブラウザ:Firefox、Chrome、Safari等で動作確認しています。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="sample.js"></script> <title>Sample Page</title> </head> <body> <h1>Sample Graphics</h1> <canvas id="myCanvas" width="640" height="480" ></canvas> <p>JavaScriptによるCANVASへの描画</p> </body> </html>
style.css
body { background-color: silver; color: white; text-align: center; } h1{ font-size: 24pt; } canvas{ background-color:black; }
sample.js
var flag = false; var oldX = 0; var oldY = 0; window.onload = function(){ var cnvs = document.getElementById("myCanvas"); cnvs.addEventListener("mousemove", draw, true); cnvs.addEventListener("mousedown", start, false); cnvs.addEventListener("mouseup", stop,false); } function draw(event){ if (!flag) return; var rect = event.target.getBoundingClientRect(); var x = event.clientX - rect.left; var y = event.clientY - rect.top; var cnvs = document.getElementById("myCanvas"); var dc = cnvs.getContext("2d"); dc.strokeStyle = "rgba(128,128,128,1)"; dc.lineWidth = 1; dc.beginPath(); dc.moveTo(oldX, oldY); dc.lineTo(x, y); dc.stroke(); dc.closePath(); oldX = x; oldY = y; } function start(event){ flag = true; var rect = event.target.getBoundingClientRect(); oldX = event.clientX - rect.left; oldY = event.clientY - rect.top; } function stop(){ flag = false; }
事例2 色やサイズを選んだお絵描き →DEMO
少し煩雑なので、このページでのソースの掲載は省略しますが、
Firefoxなどで、[ファイル]>[名前をつけてページを保存] すれば、HTML、CSS、JavaScript すべて一括でDLして見ることができますので、
その方法でご覧下さい。