This time we won’t make the canvas any different visually, it’s more just cleaning up the code. We’re making the circle into a dot object, then later it will be easier to keep track of it (and any others). interactive physics animations via javascript & canvas | 04.
[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
var this_dot = {
x: Math.random()*canvas.width/5,
y: Math.random()*canvas.height/5,
width:canvas.width,
height: canvas.height,
radius:25};
draw();
$(“#canvas”).mousedown(function (event) {
var dx, dy, dist;
dx = event.pageX – this.offsetLeft – this_dot.x;
dy = event.pageY – this.offsetTop – this_dot.y;
dist = Math.sqrt(dx * dx + dy * dy);
if(dist < radius) {
drag = true;
clickX = dx;
clickY = dy;
}
else {
drag = false;
}
});
$("#canvas").mouseup(function (event) {
drag = false;
});
$("#canvas").mousemove(function (event) {
if(drag) {
this_dot.x = event.pageX - this.offsetLeft - clickX;
this_dot.y = event.pageY - this.offsetTop - clickY;
draw();
}
});
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(this_dot.x, this_dot.y, this_dot.radius, 0, Math.PI * 2, false);
context.arc(this_dot.x*2, this_dot.y*2, this_dot.radius, 0, Math.PI * 2, false);
context.arc(this_dot.x*3, this_dot.y*3, this_dot.radius, 0, Math.PI * 2, false);
context.arc(this_dot.x*4, this_dot.y*4, this_dot.radius, 0, Math.PI * 2, false);
context.arc(this_dot.x*5, this_dot.y*5, this_dot.radius, 0, Math.PI * 2, false);
context.arc(this_dot.x*6, this_dot.y*6, this_dot.radius, 0, Math.PI * 2, false);
context.fill();
}
});
[/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.