JS：飞行随机物体（图像）

Posted 2023-03-08

【中文标题】JS：飞行随机物体（图像）

【英文标题】：JS: Flying random objects (images)

【发布时间】：2016-11-22 12:50:05

【问题描述】：

我对我在 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);

 

【问题讨论】：

你有没有尝试过？这些是画布 HTML 元素，您可以根据需要使用图像，并在 javascript 中以您喜欢的方式链接它们。还有 Adwords 呢？你确定你说的不是adsense？在这种情况下，IIRC 修改广告违反了 Google 的 TOS。

【参考方案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);

【讨论】：

很好，它可能会随机生成该图像的大小，但当然有一些限制以防止一些过大的图像？并且随机模糊效果也适用于该图像？ :)

Edoras，要求 3 个额外的功能，当你没有展示你的努力证明时有点大胆，不是吗？