Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Spinning wheel javascript
<html>
<canvas id="wheel" width="500" height="500">
<p>Upgrade your browser!</p>
</canvas>
<script type="text/javascript">
var images = ["http://bahaaaaal.com/wp-content/uploads/2013/01/siam-food-gallery.jpg","http://images.sciencedaily.com/2013/03/130307124701-large.jpg"] // sample images
function drawSlice(startAngle, i) {
var canvasNode = document.getElementById('wheel');
var ctx = canvasNode.getContext('2d');
var image = new Image();
image.onload = function() {
ctx.drawImage(image, startX - 250, startY - 250);
ctx.restore();
ctx.stroke();
};
image.src = images[i];
var startX = 250;
var startY = 250;
ctx.clearRect (0,0,500,500);
var radius = 200;
var arc = Math.PI / 6;
var angle = startAngle + i * arc;
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.arc(startX, startY, radius, angle, angle + arc, false);
ctx.arc(250, 250, 1, angle + arc, angle, true);
ctx.save();
ctx.fillStyle = "black";
ctx.fill();
ctx.clip();
}
var qty = 2500;
var counter = 1;
function next() {
if (counter < qty) {
drawSlice(counter, 0);
drawSlice(counter, 1);
setTimeout(next, 1000);
counter++;
}
}
next();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.