Skip to content

Instantly share code, notes, and snippets.

@rlemon
Created November 15, 2011 15:30
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rlemon/1367346 to your computer and use it in GitHub Desktop.
Save rlemon/1367346 to your computer and use it in GitHub Desktop.
Canvas move object to mouse click. With easing.. :P
window.onload = function() {
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext("2d");
var h, w, speed = 10;
this.onresize = function() {
h = window.innerHeight, w = window.innerWidth;
cvs.setAttribute("height", h);
cvs.setAttribute("width", w);
};
this.onresize.call();
var cx = w / 2,
cy = h / 2;
var nx = cx,
ny = cy;
this.onmouseup = function(event) {
nx = event.clientX, ny = event.clientY;
};
var draw = function() {
ctx.save();
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, w, h);
cx += (nx - cx) / speed;
cy += (ny - cy) / speed;
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(cx, cy, 10, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
ctx.restore();
setTimeout(draw, 1000 / 32);
};
draw();
};
@garlicxd
Copy link

Which part is the easing?

@AlainBarrios
Copy link

Which part is the easing?

cx += (nx - cx) / speed;
cy += (ny - cy) / speed;
this part

@marshallovski
Copy link

Where is moving object code?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment