HTML and CSS Reference
In-Depth Information
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
ball = new Ball();
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
canvas.addEventListener('mousedown', function () {
if (utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)) {
canvas.addEventListener('mouseup', onMouseUp, false);
canvas.addEventListener('mousemove', onMouseMove, false);
}
}, false);
function onMouseUp () {
canvas.removeEventListener('mouseup', onMouseUp, false);
canvas.removeEventListener('mousemove', onMouseMove, false);
}
function onMouseMove (event) {
ball.x = mouse.x;
ball.y = mouse.y;
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
ball.draw(context);
}());
};
</script>
</body>
</html>
When the script is run initially, you listen for
mousedown
events only and when the mouse is over the ball.
When called, this event handler adds additional listeners to the canvas element for
mouseup
and
mousemove
events. The
onMouseMove
function updates the ball's position to match the mouse
coordinates. The
onMouseUp
function removes the
mouseup
and
mousemove
listeners from the canvas,
because you care about these only in the dragging phase.
You might have noticed a problem with this setup. If you click the edge of the ball and drag it, you'll see
that the ball suddenly jumps and centers itself on the mouse cursor. This is because you're setting the
ball's position exactly equal to the mouse position. You can fix this by finding the offset of the mouse to the
ball on
mousedown
and adding that to the ball's position as you drag, but that is a project left for you.
