Skip to content

Instantly share code, notes, and snippets.

@rlemon
Created November 14, 2011 21:58
Show Gist options
  • Save rlemon/1365334 to your computer and use it in GitHub Desktop.
Save rlemon/1365334 to your computer and use it in GitHub Desktop.
Canvas rotation and translate example.
var s = 0;
window.onload = function() {
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext("2d");
var w = window.innerWidth,
h = window.innerHeight;
cvs.setAttribute("height", h);
cvs.setAttribute("width", w);
var make = function(o) {
ctx.beginPath();
ctx.fillStyle = o.fillStyle;
ctx.translate(o.shiftX, o.shiftY);
ctx.arc(0, 0, o.radius, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
};
var draw = function() {
ctx.save();
ctx.fillStyle = "black";
ctx.fillRect(0, 0, w, h);
make({
fillStyle: "rgb(255, 255, 0)",
shiftX: w / 2,
shiftY: h / 2,
radius: 1
});
s = s + 0.01;
for (var i = 0; i < 56; i++) {
var nv = [
Math.floor(Math.random()*255),
Math.floor(Math.random()*255),
Math.floor(Math.random()*255),
];
make({
fillStyle: "rgb(" + nv[0] + ", " + nv[1] + ", " + nv[2] + ")",
shiftX: Math.sin(i*s) * (i * 10),
shiftY: Math.cos(i*s) * (i * 10),
radius: i
});
}
ctx.restore();
setTimeout(draw, 1000 / 32);
};
draw();
};
@rlemon
Copy link
Author

rlemon commented Nov 14, 2011

can be seen http://t.co/BOITZScc

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