javascript - HTML5 Canvas : Bouncing Balls with Image Overlay

Question

我真的在 HTML5 Canvas 中遇到一些问题。

我已将该项目发布到 GitHub 页面 (https://swedy13.github.io/) 并添加了一张图片(圆圈在运动)以便您可以看到问题。基本上，如果向下滚动，您会发现页面上有几个绿色圆圈在跳来跳去。我想用我的客户 Logo 替换它们。

我根据不同的 Action 从三个文件调用 requestAnimation，所有这些都可以在 https://github.com/swedy13/swedy13.github.io/tree/master/assets/js 中找到

文件名:- filters.js(使用过滤器时调用 requestAnimation)- main.js(加载和调整大小)- portfolio.js(这是 Canvas 代码所在的位置)

更新:我在下面添加了“portfolio.js”代码，因此答案可以是独立的。

function runAnimation(width, height, type){
    var canvas  = document.getElementsByTagName('canvas')[0];
    var c = canvas.getContext('2d');

    // ---- DIMENSIONS ---- //
    // Container
    var x = width;
    var y = height - 65;
    canvas.width  = x;
    canvas.height = y;
    var container = {x: 0 ,y: 0 ,width: x, height: y};

    // Portrait Variables
    var cPos    = 200;
    var cMargin = 70;
    var cSpeed  = 3;
    var r       = x*.075;

    if (y > x && x >= 500) {
        cPos    = x * (x / y) - 150;
        cMargin = 150;
    }

    // Landscape Variables
    if (x > y) {
        cPos    = y * (y / x) - 50;
        cMargin = 150;
        cSpeed  = 3;
        r       = x*.05;
    }


    // ---- CIRCLES ---- //
    // Circles
    var circles = [];
    var img = new Image();

    // Gets active post ids and count
    var activeName  = [];
    var activeLogo  = [];
    var activePosts = $('.active').map(function() {
        activeName.push($(this).text().replace(/\s+/g, '-').toLowerCase());

        // Returns the image source
        /*activeLogo.push($(this).find('img').prop('src'));*/

        // Returns an image node
        var elem = document.getElementsByClassName($(this).text().replace(/\s+/g, '-').toLowerCase())
                            activeLogo.push(elem[0].childNodes[0]);
        });

        // Populates circle data
        for (var i = 0; i < $('.active').length; i++) {
            circles.push({
            id:activeName[i],
            r:r,
            color: 100,
            /*image: activeLogo[i],*/
            x:Math.random() * cPos + cMargin,
            y:Math.random() * cPos + cMargin,
            vx:Math.random() * cSpeed + .25,
            vy:Math.random() * cSpeed + .25
        });
    }

    // ---- DRAW ---- //
    requestAnimationFrame(draw);
    function draw(){
        c.fillStyle = 'white';
        c.fillRect(container.x, container.y, container.width, container.height);

        for (var i = 0; i < circles.length; i++){
            /*var img = new Image();
            var path = circles[i].image;*/
            /*var size = circles[i].r * 2;*/
            /*img.src = circles[4].image;*/
            var img = activeLogo[i];
            img.onload = function (circles) {
                /*c.drawImage(img, 0, 0, size, size);*/

                var pattern = c.createPattern(this, "repeat");
                c.fillStyle = pattern;
                c.fill();
            };

            c.fillStyle = 'hsl(' + circles[i].color + ', 100%, 50%)';
            c.beginPath();
            c.arc(circles[i].x, circles[i].y, circles[i].r, 0, 2*Math.PI, false);
            c.fill();


            // If the circle size/position is greater than the canvas width, bounce x
            if ((circles[i].x + circles[i].vx + circles[i].r > container.width) || (circles[i].x - circles[i].r + circles[i].vx < container.x)) {
                circles[i].vx = -circles[i].vx;
            }

            // If the circle size/position is greater than the canvas width, bounce y
            if ((circles[i].y + circles[i].vy + circles[i].r > container.height) || (circles[i].y - circles[i].r + circles[i].vy < container.y)){
                circles[i].vy = -circles[i].vy;
            }

            // Generates circle motion by adding position and velocity each frame
            circles[i].x += circles[i].vx;
            circles[i].y += circles[i].vy;
        }
        requestAnimationFrame(draw);
    }
}

它现在的工作方式是:1. 我将我的投资组合内容设置为“显示:无”(最终当他们点击其中一个圆圈时它会弹出)。2. Canvas 正在从 DOM 中获取投资组合对象，包括我无法工作的图像。3. 如果我使用“onload()”函数，我可以让图像在后台显示和重复。但它只是一个静态背景 - 圆圈在其上方移动并显示背景。这不是我想要的。

基本上，我想弄清楚如何将背景图像附加到圆圈(基于圆圈 ID)。

---

----------------更新----------------

我现在可以将图像剪裁成一个圆圈，并让圆圈在背景中移动。但它在页面上不可见(我可以通过控制台记录它的位置来判断它正在移动)。我唯一看到任何东西的时间是当圆圈与图像位置对齐时，它就会显示出来。

function runAnimation(width, height, type){
    var canvas  = document.getElementsByTagName('canvas')[0];
    var c = canvas.getContext("2d");
    canvas.width = width;
    canvas.height = height;

    // Collects portfolio information from the DOM
    var activeName = [];
    var activeLogo = [];
    $('.active').map(function() {
        var text = $(this).text().replace(/\s+/g, '-').toLowerCase();
        var elem = document.getElementsByClassName(text);

        activeName.push(text);
        activeLogo.push(elem[0].childNodes[0]);
    });

    var img = new Image();
    img.onload = start;

    var circles = [];
    var cPos = 200;
    var cMargin = 70;
    var cSpeed = 3;
    for (var i = 0; i < 1; i++) {
        circles.push({
            id: activeName[i],
            img: activeLogo[i],
            size: 50,
            xPos: Math.random() * cPos + cMargin,
            yPos: Math.random() * cPos + cMargin,
            xVel: Math.random() * cSpeed + .25,
            yVel: Math.random() * cSpeed + .25,
        });
        img.src = circles[i].img;
    }

    requestAnimationFrame(start);
    function start(){
        for (var i = 0; i < circles.length; i++) {
            var circle = createImageInCircle(circles[i].img, circles[i].size, circles[i].xPos, circles[i].yPos);
            c.drawImage(circle, circles[i].size, circles[i].size);
                                            animateCircle(circles[i]);
        }

        requestAnimationFrame(start);
    }

    function createImageInCircle(img, radius, x, y){
        var canvas2 = document.createElement('canvas');
        var c2 = canvas2.getContext('2d');

        canvas2.width = canvas2.height = radius*2;

        c2.fillStyle = 'white';
        c2.beginPath();
        c2.arc(x, y, radius, 0, Math.PI*2);
        c2.fill();
        c2.globalCompositeOperation = 'source-atop';
        c2.drawImage(img, 0, 0, 100, 100);

        return(canvas2);
    }

    function animateCircle(circle) {
    // If the circle size/position is greater than the canvas width, bounce x
    if ((circle.xPos + circle.xVel + circle.size > canvas.width) || (circle.xPos - circle.size + circle.xVel < 0)) {
        console.log('Bounce X');
        circle.xVel = -circle.xVel;
    }

    // If the circle size/position is greater than the canvas width, bounce y
    if ((circle.yPos + circle.yVel + circle.size > canvas.height) || (circle.yPos + circle.yVel - circle.size < 0)) {
        console.log('Bounce Y');
        circle.yVel = -circle.yVel;
    }

    // Generates circle motion by adding position and velocity each frame
    circle.xPos += circle.xVel;
    circle.yPos += circle.yVel;
}
}

我不确定我制作的动画是否正确。我试过为 canvas2 制作动画，但这对我来说没有意义。

PS - 对 GitHub 格式感到抱歉，不确定为什么会这样。PPS - 对我没有清理的任何垃圾代码表示歉意。我尝试了很多东西，可能忘记了一些变化。PPPS - 请原谅我没有让答案独立存在。我认为链接到 GitHub 会更有用，但我已经更新了问题以包含所有必要的信息。感谢您的反馈。

Answer 1

让你开始......

以下是如何使用合成将图像剪裁成圆形。

示例代码创建了一个 Canvas Logo 球，您可以将其重复用于每个弹跳球。

var logoball1=dreateImageInCircle(logoImg1,50);
var logoball2=dreateImageInCircle(logoImg2,50);

然后您可以像这样在主 Canvas 上绘制每个 Logo 球:

ctx.drawImage(logoball1,35,40);
ctx.drawImage(logoball2,100,75);

Stackoverflow 上有很多关于如何为 Canvas 周围的球设置动画的示例，所以我将那部分留给您。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/m%26m600x455.jpg";
function start(){
    var copy=createImageInCircle(img,50);
    ctx.drawImage(copy,20,75);
    ctx.drawImage(copy,150,120);
    ctx.drawImage(copy,280,75);
}

function createImageInCircle(img,radius){
    var c=document.createElement('canvas');
    var cctx=c.getContext('2d');
    c.width=c.height=radius*2;
    cctx.beginPath();
    cctx.arc(radius,radius,radius,0,Math.PI*2);
    cctx.fill();
    cctx.globalCompositeOperation='source-atop';
    cctx.drawImage(img,radius-img.width/2,radius-img.height/2);
    return(c);
}

body{ background-color:white; }
#canvas{border:1px solid red; }

<canvas id="canvas" width=512 height=512></canvas>