如何使用画布动画在点击上添加随机形状

Question

对于这个动画点击我需要一个不同的形状，我总共需要5种不同的形状。我也很难做这些事情，

向每个圆圈添加随机运动矢量

添加一个间隔计时器，每30毫秒重新绘制背景和每个圆圈的新位置

检查任何圆圈是否在画布宽度和高度之外，如果是，则将其方向反转回屏幕

也许也许如果我可以有一些随机文本淡入并且每隔几秒就淡出

代码......

      
var canvas;
var context;
var circles = [];
var timer;
function Circle(x, y, color) {
    this.x = x;
    this.y = y;
    this.dx = Math.random() * 4 - 2;
    this.dy = Math.random() * 4 - 2;
    this.color = color;
}
function init() {
    canvas = document.getElementById('canvas');
    context = canvas.getContext("2d");

    window.addEventListener('resize', resizeCanvas, false);
    window.addEventListener('orientationchange', resizeCanvas, false);
    resizeCanvas();
    canvas.onclick = function (event) {
        handleClick(event.clientX, event.clientY);
    };
    timer = setInterval(resizeCanvas, 20);
}
function handleClick(x, y) {
    var found = false;
    for (var i = 0; i < circles.length; i++) {
        d = Math.sqrt((circles[i].x - x) * (circles[i].x - x) + (circles[i].y - y) * (circles[i].y - y));
        if (d <= 30) {
            circles.splice(i, 1);
            found = true;
        }
    }
    fillBackgroundColor();
    if (!found) {
        var colors = ["red", "green", "blue", "orange", "purple", "yellow"];
        var color = colors[Math.floor(Math.random() * colors.length)];
        circles.push(new Circle(x, y, color));
    }
    for (var i = 0; i < circles.length; i++) {
        drawCircle(circles[i]);
    }
}
function drawCircle(circle) {
    context.beginPath();
    context.arc(circle.x, circle.y, 30, 0, degreesToRadians(360), true);
    context.fillStyle = circle.color;
    context.fill();
    if (circle.x + circle.dx > canvas.width || circle.x + circle.dx < 0)
        circle.dx = -circle.dx;
    if (circle.y + circle.dy > canvas.height || circle.y + circle.dy < 0)
        circle.dy = -circle.dy;
    circle.x += circle.dx;
    circle.y += circle.dy;
}
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    fillBackgroundColor();
    for (var i = 0; i < circles.length; i++) {
        drawCircle(circles[i]);
    }
}
function fillBackgroundColor() {
    //var colors = ["white", "yellow", "blue", "red"];
    //var bgColor = colors[Math.floor(Math.random() * colors.length)];
    context.fillStyle = 'black';
    context.fillRect(0, 0, canvas.width, canvas.height);
}
function degreesToRadians(degrees) {
    //converts from degrees to radians and returns
    return (degrees * Math.PI) / 180;
}
window.onload = init;

<canvas id='canvas' width=500 height=500></canvas>