Question

我试图将一个男人的图像放在我在页面上弹跳的派对项目的动画上。

我已经多次改变了我的设计但是仍然会出现这个问题：当我将动画的代码输出时，图像会适合页面。但当我把它放回图像中消失，动画显示没有问题。

这是代码

＆＃13;

window.addEventListener("load", myApp, false);


function myApp() {
  var canvas;
  var context;
  var x, x2, x3, x4, x5;
  var y, y2, y3, y4, y5;
  var img, img2, img3, img4, img5;
  var image;
  var length, length2, length3, length4, length5;
  var height, height2, height3, height4, height5;
  var xdir, xdir2, xdir3, xdir4, xdir5;
  var ydir, ydir2, ydir3, ydir4, ydir5;

  function getCanvas() {
    var tmp;

    tmp = document.getElementById("mycanvas");

    if (tmp == null) {
      alert("no canvas");
    }

    return tmp;

  }

  function animateMe() {

    context.drawImage(image, 0, 0, 350, 350);

    context.clearRect(0, 0, canvas.width, canvas.height);

    context.drawImage(img, x, y, length, height);


    if (x > canvas.width) {
      xdir = -1 * xdir;
    }

    if (x < 0) {
      xdir = -1 * xdir;
    }

    if (y > canvas.height) {
      ydir = ydir * -1;
    }

    if (y < 0) {
      ydir = ydir * -1;
    }


    x = x + xdir;
    y = y + ydir;

    // 2

    context.drawImage(img2, x2, y2, length2, height2);

    if (x2 > canvas.width) {
      xdir2 = xdir2 * -1;
    }

    if (x2 < 0) {
      xdir2 = xdir2 * -1;
    }

    if (y2 > canvas.height) {
      ydir2 = ydir2 * -1;
    }

    if (y2 < 0) {
      ydir2 = ydir2 * -1;
    }


    x2 = x2 + xdir2;
    y2 = y2 + ydir2;

    //3
    context.drawImage(img3, x3, y3, length3, height3);

    if (x3 > canvas.width) {
      xdir3 = xdir3 * -1;
    }

    if (x3 < 0) {
      xdir3 = xdir3 * -1;
    }

    if (y3 > canvas.height) {
      ydir3 = ydir3 * -1;
    }

    if (y3 < 0) {
      ydir3 = ydir3 * -1;
    }


    x3 = x3 + xdir3;
    y3 = y3 + ydir3;

    //4
    context.drawImage(img4, x4, y4, length4, height4);

    if (x4 > canvas.width) {
      xdir4 = xdir4 * -1;
    }

    if (x4 < 0) {
      xdir4 = xdir4 * -1;
    }

    if (y4 > canvas.height) {
      ydir4 = ydir4 * -1;
    }

    if (y4 < 0) {
      ydir4 = ydir4 * -1;
    }


    x4 = x4 + xdir4;
    y4 = y4 + ydir4;

    //5
    context.drawImage(img5, x5, y5, length5, height5);

    if (x5 > canvas.width) {
      xdir5 = xdir5 * -1;
    }

    if (x5 < 0) {
      xdir5 = xdir5 * -1;
    }

    if (y5 > canvas.height) {
      ydir5 = ydir5 * -1;
    }

    if (y5 < 0) {
      ydir5 = ydir5 * -1;
    }


    x5 = x5 + xdir5;
    y5 = y5 + ydir5;

    requestAnimationFrame(animateMe);
  }

  canvas = getCanvas();
  context = canvas.getContext("2d");

  init();

  function init() {


    x = 124;
    y = 211;

    img = new Image();
    img.src = "cake 1.png";

    length = 150;
    height = 150;

    xdir = 6;
    ydir = 7;




    x2 = 1;
    y2 = 111;

    img2 = new Image();
    img2.src = "cake 2.png";

    length2 = 175;
    height2 = 175;

    xdir2 = 3;
    ydir2 = 5;




    x3 = 152;
    y3 = 333;

    img3 = new Image();
    img3.src = "hat 1.png";

    length3 = 100;
    height3 = 150;

    xdir3 = 5;
    ydir3 = 5;




    x4 = 15;
    y4 = 211;

    img4 = new Image();
    img4.src = "hat 2.png";

    length4 = 100;
    height4 = 150;

    xdir4 = 7;
    ydir4 = 3;





    x5 = 400;
    y5 = 1;

    img5 = new Image();
    img5.src = "streamer.png";

    length5 = 200;
    height5 = 200;

    xdir5 = 10;
    ydir5 = 7;


    image = new Image();
    image.src = "Man.png";


    animateMe();
  }

}

＆＃13;

<canvas style="border:1px solid #000000;" id="mycanvas" width="500" height="500">
Your browser does not support canvas
</canvas>

＆＃13;

Answer 1

移动清除。

当lorempixel加载图像时，下面的代码运行。它将在您的服务器上运行得更快

我还尝试使用context.globalCompositeOperation = 'destination-over';，以防你想要其他人的图像，但它似乎没有做到预期的事情（How to drawImage behind all other content on a canvas?）

window.addEventListener("load", myApp, false);


function myApp() {
  var canvas;
  var context;
  var x, x2, x3, x4, x5;
  var y, y2, y3, y4, y5;
  var img, img2, img3, img4, img5;
  var image;
  var length, length2, length3, length4, length5;
  var height, height2, height3, height4, height5;
  var xdir, xdir2, xdir3, xdir4, xdir5;
  var ydir, ydir2, ydir3, ydir4, ydir5;

  function getCanvas() {
    var tmp;

    tmp = document.getElementById("mycanvas");

    if (tmp == null) {
      alert("no canvas");
    }

    return tmp;

  }

  function animateMe() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(img, x, y, length, height);


    if (x > canvas.width) {
      xdir = -1 * xdir;
    }

    if (x < 0) {
      xdir = -1 * xdir;
    }

    if (y > canvas.height) {
      ydir = ydir * -1;
    }

    if (y < 0) {
      ydir = ydir * -1;
    }


    x = x + xdir;
    y = y + ydir;

    // 2

    context.drawImage(img2, x2, y2, length2, height2);

    if (x2 > canvas.width) {
      xdir2 = xdir2 * -1;
    }

    if (x2 < 0) {
      xdir2 = xdir2 * -1;
    }

    if (y2 > canvas.height) {
      ydir2 = ydir2 * -1;
    }

    if (y2 < 0) {
      ydir2 = ydir2 * -1;
    }


    x2 = x2 + xdir2;
    y2 = y2 + ydir2;

    //3
    context.drawImage(img3, x3, y3, length3, height3);

    if (x3 > canvas.width) {
      xdir3 = xdir3 * -1;
    }

    if (x3 < 0) {
      xdir3 = xdir3 * -1;
    }

    if (y3 > canvas.height) {
      ydir3 = ydir3 * -1;
    }

    if (y3 < 0) {
      ydir3 = ydir3 * -1;
    }


    x3 = x3 + xdir3;
    y3 = y3 + ydir3;

    //4
    context.drawImage(img4, x4, y4, length4, height4);

    if (x4 > canvas.width) {
      xdir4 = xdir4 * -1;
    }

    if (x4 < 0) {
      xdir4 = xdir4 * -1;
    }

    if (y4 > canvas.height) {
      ydir4 = ydir4 * -1;
    }

    if (y4 < 0) {
      ydir4 = ydir4 * -1;
    }


    x4 = x4 + xdir4;
    y4 = y4 + ydir4;

    //5
    context.drawImage(img5, x5, y5, length5, height5);

    if (x5 > canvas.width) {
      xdir5 = xdir5 * -1;
    }

    if (x5 < 0) {
      xdir5 = xdir5 * -1;
    }

    if (y5 > canvas.height) {
      ydir5 = ydir5 * -1;
    }

    if (y5 < 0) {
      ydir5 = ydir5 * -1;
    }


    x5 = x5 + xdir5;
    y5 = y5 + ydir5;

    context.globalCompositeOperation = 'destination-over'; // does not seem to do it
    context.drawImage(image, 0, 0, 350, 350); 


    requestAnimationFrame(animateMe);
  }

  canvas = getCanvas();
  context = canvas.getContext("2d");

  init();

  function init() {


    x = 124;
    y = 211;

    img = new Image();
    img.src = "https://lorempixel.com/150/150";

    length = 150;
    height = 150;

    xdir = 6;
    ydir = 7;




    x2 = 1;
    y2 = 111;

    img2 = new Image();
    img2.src = "https://lorempixel.com/175/175";

    length2 = 175;
    height2 = 175;

    xdir2 = 3;
    ydir2 = 5;




    x3 = 152;
    y3 = 333;

    img3 = new Image();
    img3.src = "https://lorempixel.com/100/150";

    length3 = 100;
    height3 = 150;

    xdir3 = 5;
    ydir3 = 5;




    x4 = 15;
    y4 = 211;

    img4 = new Image();
    img4.src = "https://lorempixel.com/100/150";

    length4 = 100;
    height4 = 150;

    xdir4 = 7;
    ydir4 = 3;





    x5 = 400;
    y5 = 1;

    img5 = new Image();
    img5.src = "https://lorempixel.com/200/200";

    length5 = 200;
    height5 = 200;

    xdir5 = 10;
    ydir5 = 7;


    image = new Image();
    image.src = "https://lorempixel.com/200/200/sports/1";


    animateMe();
  }

}

<canvas style="border:1px solid #000000;" id="mycanvas" width="500" height="500">
Your browser does not support canvas
</canvas>

结果的静态图像：

的JavaScript。当我的动画工作时，我的图像不会显示在我的画布上

1 个答案: