Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
JavaScript でマウス座標を取得し、Canvas上に線を描画
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mouse座標取得</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body{
text-align: center;
background-color: #fafafa;
font-size: 20px;
color: #333;
}
#mycanvas{
border: 1px solid #333;
}
</style>
</head>
<body>
<canvas width="320" height="240" id="mycanvas">
Canvasに対応したブラウザを用意して下さい。
</canvas>
<div id="info"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script>
(function(){
window.onload = function(){
var canvas = document.getElementById('mycanvas');
if(!canvas || !canvas.getContext){
return false;
}
var ctx = canvas.getContext('2d');
//マウスの座標を取得
var mouse = {
startX: 0,
startY: 0,
x: 0,
y: 0,
color: "black",
isDrawing: false
};
var borderWidth = 1;
canvas.addEventListener("mousemove", function(e){
//2.マウスが動いたら座標値を取得
var rect = e.target.getBoundingClientRect();
mouse.x = e.clientX - rect.left - borderWidth;
mouse.y = e.clientY - rect.top - borderWidth;
/*
pageX[Y], offsetLeft[Top]を使う場合
mouse.x = e.pageX - canvas.offsetLeft - borderWidth;
mouse.y = e.pageY - canvas.offsetTop - borderWidth;
*/
//3.情報をinfoに出力
document.getElementById("info").innerHTML =
" clientX = " + Math.floor(e.clientX) + "px" +
" clientY = " + Math.floor(e.clientY) + "px" + '<br>' +
" rect.left = " + Math.floor(rect.left) + "px" +
" rect.top = " + Math.floor(rect.top) + "px" + '<br><br>' +
" pageX = " + Math.floor(e.pageX) + "px" +
" pageY = " + Math.floor(e.pageY) + "px" + '<br>' +
' offsetLeft = ' + Math.floor(canvas.offsetLeft) + "px" +
' offsetTop = ' + Math.floor(canvas.offsetTop) + "px" + '<br><br>' +
" canvas x座標 = " + Math.floor(mouse.x) + "px" +
" canvas y座標 = " + Math.floor(mouse.y) + "px" + '<br>';
//4.isDrawがtrueのとき描画
if (mouse.isDrawing){
ctx.beginPath();
ctx.moveTo(mouse.startX, mouse.startY);
ctx.lineTo(mouse.x, mouse.y);
ctx.strokeStyle = mouse.color;
ctx.stroke();
mouse.startX = mouse.x;
mouse.startY = mouse.y;
}
});
//5.マウスを押したら、描画OK(myDrawをtrue)
canvas.addEventListener("mousedown", function(e){
mouse.isDrawing = true;
mouse.startX = mouse.x;
mouse.startY = mouse.y;
});
//6.マウスを上げたら、描画禁止(myDrawをfalse)
canvas.addEventListener("mouseup", function(e){
mouse.isDrawing = false;
});
canvas.addEventListener('mouseleave', function(e){
mouse.isDrawing = false;
});
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment