javascript - JS : Flying random objects (images)

Question

我对我在 photoshop 中的概念有一个小问题:

我需要创建 html5/css/js adwords 横幅，它们将在其中悬浮背景图像(红色五边形)，但也在整个横幅的最前面，因为除了那些悬浮图片之外还会有其他对象(文本，按钮)。

有可能实现这一点，如果用户将光标移到该横幅上，也有可能根据光标位置更改移动这些红色五边形的路径？

编辑: 我找到了这个元素:https://codepen.io/VIRU/pen/FAdkl 可以编辑飞行图片吗？

window.onload = function() {

    //Create canvas and initialize it's context
    var canvas = document.getElementById("flying-bubbles");
    var ctx = canvas.getContext("2d");

    //Set the dimensions of canvas equal to the window's dimensions
    var W = window.innerWidth, H = window.innerHeight;
    canvas.width = W;
    canvas.height = H;

    //Create an array of circles
    var circles = []; 
    for(var i = 0; i < 20; i++ ){
        circles.push(new create_circle());
    }

    //Function to create circles with different positions and velocities
    function create_circle() {
        //Random Position
        this.x = Math.random()*W;
        this.y = Math.random()*H;

        //Random Velocities
        this.vx = 0.1+Math.random()*1;
        this.vy = -this.vx;

        //Random Radius
        this.r = 10 + Math.random()*50;
    }

    //Function to draw the background
    function draw() {
        //Create the gradient
        var grad = ctx.createLinearGradient(0, 0, W, H);
        grad.addColorStop(0, 'rgb(19, 105, 168)');
        grad.addColorStop(1, 'rgb(0, 0, 0)');

        //Fill the canvas with the gradient
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = grad;
        ctx.fillRect(0,0,W,H);

        //Fill the canvas with the circles
        for(var j = 0; j < circles.length; j++) {
            var c = circles[j];

            //Draw the circle and it with the blur grad
            ctx.beginPath();
            ctx.globalCompositeOperation = "lighter";       
            ctx.fillStyle = grad;
            ctx.arc(c.x, c.y, c.r, Math.PI*2, false);
            ctx.fill();

            //Lets use the velocity now
            c.x += c.vx;
            c.y += c.vy;

            //To prevent the circles from moving out of the canvas
            if(c.x < -50) c.x = W+50;
            if(c.y < -50) c.y = H+50;
            if(c.x > W+50) c.x = -50;
            if(c.y > H+50) c.y = -50;
        }
    }

    setInterval(draw, 25);

} 

Answer 1

http://codepen.io/zimon/pen/KNmKpN

尝试改变绘制到图像上的圆圈。

var img = new Image();
    img.src= 'http://www.media3.net/images/redsquare.png';

    ctx.drawImage(img,c.x,c.y);