Question

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

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

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

中找到

文件名： - filters.js（使用过滤器时调用requestAnimation） - main.js（加载和调整大小） - portfolio.js（这是画布代码所在的位置）

更新：我已添加＆＃34; portfolio.js＆＃34;下面的代码，所以答案可以是独立的。

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.我的投资组合内容设置为＆＃34;显示：无＆＃34; （当他们点击其中一个圆圈时，最终会弹出一个弹出窗口）。 2.画布从DOM获取组合对象，包括我无法工作的图像。 3.如果我使用＆＃34; onload（）＆＃34;功能，我可以让图像显示并在后台重复。但它只是一个静态的背景 - 圆圈在它上面移动并露出背景。那不是我想要的。

所以基本上，我试图弄清楚如何将背景图像附加到圆圈（基于圆圈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

让你入门......

以下是使用合成将图像剪辑成圆形的方法。

示例代码会创建一个单独的画布徽标球，您可以为每个弹跳球重复使用。

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

然后你可以将每个徽标球画到主画布上，如下所示：

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

Stackoverflow上有很多关于如何在画布周围设置动画的动画示例，所以我将这部分留给你。

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>

HTML5 Canvas：带图像叠加的弹跳球

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

1 个答案: