js圆周运动动画_使用Canvas实现随机形状的圆周运动动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var canvas = $("#myCanvas");

var context = canvas.get(0).getContext("2d");

var canvasWidth = canvas.width();

var canvasHeight = canvas.height();

var playAnimation = true;

var startButton = $("#startAnimation");

var stopButton = $("#stopAnimation");

startButton.hide();

startButton.click(function() {

$(this).hide();

stopButton.show();

playAnimation = true;

animate();

});

stopButton.click(function() {

$(this).hide();

startButton.show();

playAnimation = false;

});

var Shape = function(x, y, width, height) {

this.x = x;

this.y = y;

this.width = width;

this.height = height;

this.radius = Math.random() * 30;

this.angle = 0;

};

var shapes = new Array();

for (var i = 0; i < 10; i++) {

var x = Math.random() * 250;

var y = Math.random() * 250;

var width = height = Math.random() * 30;

shapes.push(new Shape(x, y, width, height));

};

function animate() {

context.clearRect(0, 0, canvasWidth, canvasHeight);

var shapesLength = shapes.length;

for (var i = 0; i < shapesLength; i++) {

var tmpShape = shapes[i];

var x =

tmpShape.x + (tmpShape.radius * Math.cos(tmpShape.angle * (Math.PI / 180)));

var y =

tmpShape.y + (tmpShape.radius * Math.sin(tmpShape.angle * (Math.PI / 180)));

tmpShape.angle += 5;

if (tmpShape.angle > 360) {

tmpShape.angle = 0;

};

context.fillRect(x, y, tmpShape.width, tmpShape.height);

};

if (playAnimation) {

setTimeout(animate, 33);

};

};

animate();