JavaScript｜お絵かきソフト
JavaScriptによる簡単なお絵かき
事例1 マウスで線を描く →DEMO
マウスの位置情報を用いたシンプルなお絵描きです。index.html、style.css、sample.js の３つのソースコードをそれぞれテキストエディタにコピー＆ペーストして、見出しにあるとおりのファイル名で同じフォルダに保存すれば、ローカルで動かすことができます。
注） 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して見ることができますので、
その方法でご覧下さい。