Javascript HTML5画布：带图像覆盖的弹跳球

我在HTML5画布上遇到了几个问题

我已将该项目发布到GitHub pages（），并添加了一个图像（圆圈正在运动），以便您可以看到问题。基本上，如果你向下滚动，你会发现页面上有几个绿色圆圈在跳跃。我想用我的客户徽标替换这些

我根据不同的动作从三个文件调用requestAnimation，所有这些都可以在中找到

文件名： -filters.js（使用过滤器时调用requestAnimation） -main.js（加载并调整大小） -portfolio.js（画布代码就在这里）

更新：我在下面添加了“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);
    }
}

函数运行动画（宽度、高度、类型）{
var canvas=document.getElementsByTagName（'canvas'）[0]；
var c=canvas.getContext（'2d'）；
//----尺寸--//
//容器
var x=宽度；
变量y=高度-65；
canvas.width=x；
canvas.height=y；
var容器={x:0，y:0，宽度：x，高度：y}；
//纵向变量
var-cPos=200；
var cMargin=70；
var-cSpeed=3；
var r=x*.075；
如果（y>x&&x>=500）{
cPos=x*（x/y）-150；
cMargin=150；
}
//景观变量
如果（x>y）{
cPos=y*（y/x）-50；
cMargin=150；
cSpeed=3；
r=x*.0.05；
}
//----圆圈----//
//圈
var循环=[]；
var img=新图像（）；
//获取活动的帖子ID和计数
var-activeName=[]；
var-activeLogo=[]；
var activePosts=$（'.active'）.map（函数（）{
activeName.push（$（this.text（）.replace（/\s+/g，'-'）.toLowerCase（））；
//返回图像源
/*activeLogo.push（$（this.find（'img'）.prop（'src'））*/
//返回图像节点
var elem=document.getElementsByClassName（$（this）.text（）.replace（/\s+/g，'-'）.toLowerCase（））
activeLogo.push（元素[0].childNodes[0]）；
});
//填充圆数据
对于（变量i=0；i<$（'.active'）。长度；i++）{
推({
id:activeName[i]，
r:r，
颜色：100，
/*图片：activeLogo[i]*/
x:Math.random（）*cPos+cMargin，
y:Math.random（）*cPos+cMargin，
vx:Math.random（）*cSpeed+.25，
vy:Math.random（）*cSpeed+.25
});
}
//----画----//
请求动画帧（绘制）；
函数绘图（）{
c、 fillStyle='白色'；
c、 fillRect（container.x，container.y，container.width，container.height）；
对于（变量i=0；icontainer.width）| |（圆[i].x-圆[i].r+圆[i].vxcontainer.height）| |（圆[i].y-圆[i].r+圆[i].vy

目前的工作方式是： 1.我将我的公文包内容设置为“display:none”（最终，当他们单击其中一个圆圈时，它将弹出）。 2.画布从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;
}
}

函数运行动画（宽度、高度、类型）{
var canvas=document.getElementsByTagName（'canvas'）[0]；
var c=canvas.getContext（“2d”）；
画布宽度=宽度；
canvas.height=高度；
//从DOM收集投资组合信息
var-activeName=[]；
var-activeLogo=[]；
$（'.active'）.map（函数（）{
var text=$（this.text（）.replace（/\s+/g，'-'）.toLowerCase（）；
var elem=document.getElementsByClassName（文本）；
activeName.push（文本）；
activeLogo.push（元素[0].childNodes[0]）；
});
var img=新图像（）；
img.onload=启动；
var循环=[]；
var-cPos=200；
var cMargin=70；
var-cSpeed=3；
对于（变量i=0；i<1；i++）{
推({
id:activeName[i]，
img:activeLogo[i]，
尺码：50，
var logoball1=dreateImageInCircle(logoImg1,50);
var logoball2=dreateImageInCircle(logoImg2,50);

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