そもそもCanvasオブジェクトのプロパティがさっぱりわからなかったけど、ここに救世主がいた。
一番困ったのが、マウスイベントであがってくるX、Ｙ座標はスクリーンのものでありCanvasオブジェクト内のものではないこと。以下のコードではJavaScript内で明示的にCanvasのStyle.top, style.leftで場所を指定しています。こうしないと、いきなりcanvas.style.topで値を取り出すとなにもセットされていないのです。HTMLでなんとなく置いたcanvasの位置はブラウザーも知らない、ってことなんでしょうかね。
あとは、このテではよくあるコードでマウスのイベントリスナーを登録します。マウスアップのタイミングで線を引く時に、マウスの位置をcanvasの位置で補正すれば、正確にお絵かきができます。
こんな基本的な例でも、以外にないのですよ？
<html>
<head>
<title>Canvas Test</title>
</head>
<body>
<h1> Canvas </h1>
<canvas id=”canvas” width=”300″ height=”200″ style=”border:1px solid black;”></canvas>
<script type=”text/javascript”>
<!–
var mouseDownFlag = false;
var offsetX = 10; // 明示的に
var offsetY = 100; //明示的に
var oldX = 0;
var oldY = 0;
var canvas = document.getElementById(‘canvas’);
var context = canvas.getContext(‘2d’);
canvas.style.position = ‘absolute’;
canvas.style.left = offsetX;
canvas.style.top? = offsetY;
// mouse move listener
document.addEventListener(‘mousemove’, function (e) {
if (mouseDownFlag == false) return;
var mouseX = e.pageX;
var mouseY = e.pageY;
drawLine(context, oldX-offsetX, oldY-offsetY, mouseX-offsetX, mouseY-offsetY);
oldX = mouseX;
oldY = mouseY;
}, false);
// mouse down listener
document.addEventListener(‘mousedown’, function (e) {
oldX = e.pageX;
oldY = e.pageY;
mouseDownFlag = true;
e.preventDefault();
}, false);
document.addEventListener(‘mouseup’, function () {
mouseDownFlag = false;
}, false);
function drawLine(context,x1,y1,x2,y2){
context.beginPath();
context.moveTo(x1,y1);
context.lineTo(x2,y2);
context.closePath();
context.stroke();
}
// –>
</script>
</body>
</html>
