javascript - Change falling hearts background animation to use multiple, random images

Question

My question is for this plugin: https://codepen.io/bferioli/pen/qEGaPp

I'm trying to use several pictures in this canvas but I can't find how to. Basically, what I want is to display randomly a selection of images (10 or more) instead of only the heart.

I think I have to edit this part of that CodePen snippet:

  heartHeight: 60,
  heartWidth: 64,
  hearts: [],
  heartImage: 'http://i58.tinypic.com/ntnw5.png',
  maxHearts: 8,
  minScale: 0.4,
  draw: function() {
    this.setCanvasSize();
    this.ctx.clearRect(0, 0, this.w, this.h);
    for (var i = 0; i < this.hearts.length; i++) {
      var heart = this.hearts[i];
      heart.image = new Image();
      heart.image.style.height = heart.height;
      heart.image.src = this.heartImage;
      this.ctx.globalAlpha = heart.opacity;
      this.ctx.drawImage (heart.image, heart.x, heart.y, heart.width, 
      heart.height);
    }

HERE IS MY CODE visible here: https://codepen.io/Le-future/pen/eKaarK

  var imagesArray = ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAABlBMVEX/4AL9+dVNpYF7AAAATElEQVR4nO3BQREAAAwCIO1fein28YB0XQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAvXXdlRQHDJgU7pgAAAABJRU5ErkJggg==", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEUpczS1QJ41AAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC", "https://www.apyart.com/2226-thickbox_default/bleu-ciel-500ml.jpg"];

  var HeartsBackground = {
            heartHeight: 60,
            heartWidth: 64,
            hearts: [],
            heartImage: 'http://i58.tinypic.com/ntnw5.png',
            maxHearts: 8,
            minScale: 0.4,
            draw: function() {
              this.setCanvasSize();
              this.ctx.clearRect(0, 0, this.w, this.h);
              for (var i = 0; i < this.hearts.length; i++) {
                var num = Math.floor(Math.random() * 3); // 0...3
                var heart = this.hearts[i];
                heart.image = new Image();
                heart.image.style.height = heart.height;
                heart.image.src = imagesArray[num];
                this.ctx.globalAlpha = heart.opacity;
                this.ctx.drawImage (heart.image, heart.x, heart.y, heart.width, heart.height);
              }
      this.move();
    },
    move: function() {
      for(var b = 0; b < this.hearts.length; b++) {
        var heart = this.hearts[b];
        heart.y += heart.ys;
        if(heart.y > this.h) {
          heart.x = Math.random() * this.w;
          heart.y = -1 * this.heartHeight;
        }
      }
    },
    setCanvasSize: function() {
      this.canvas.width = window.innerWidth;
      this.canvas.height = window.innerHeight;
      this.w = this.canvas.width;
      this.h = this.canvas.height;
    },
    initialize: function() {
      this.canvas = $('#canvas')[0];

      if(!this.canvas.getContext)
        return;

      this.setCanvasSize();
      this.ctx = this.canvas.getContext('2d');

      for(var a = 0; a < this.maxHearts; a++) {
        var scale = (Math.random() * (1 - this.minScale)) + this.minScale;
        this.hearts.push({
          x: Math.random() * this.w,
          y: Math.random() * this.h,
          ys: Math.random() + 1,
          height: scale * this.heartHeight,
          width: scale * this.heartWidth,
          opacity: scale,
          image: imagesArray[Math.floor(Math.random()*imagesArray.length)]
        });
      }

      setInterval($.proxy(this.draw, this), 30);
    }
  };

  $(document).ready(function(){
    HeartsBackground.initialize();
  });

标签： javascripthtmlimageanimationcanvas

Answer 1

我的答案是在heartsBackground 循环之外添加一个数组。它将用于存储 8 个对象中每个对象的图像。

var heartsOutside = ["","","","","","","",""]

然后我检查外部数组是否包含数据，如果存在则加载

if(heartsOutside[i] != ""){num = heartsOutside[i]}

然后将数据存储到外部数组以进行下一个循环

heartsOutside[i] = num;

我还在移动功能中添加了一个步骤以在到达跌落底部时清除心脏图像

heartsOutside[b] = ""

      var imagesArray = ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAABlBMVEX/4AL9+dVNpYF7AAAATElEQVR4nO3BQREAAAwCIO1fein28YB0XQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAvXXdlRQHDJgU7pgAAAABJRU5ErkJggg==", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEUpczS1QJ41AAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC", "https://www.apyart.com/2226-thickbox_default/bleu-ciel-500ml.jpg"];
      var heartsOutside = ["","","","","","","",""]
      var HeartsBackground = {
                heartHeight: 60,
                heartWidth: 64,
                hearts: [],
                heartImage: 'http://i58.tinypic.com/ntnw5.png',
                maxHearts: 8,
                minScale: 0.4,
                draw: function() {
                  this.setCanvasSize();
                  this.ctx.clearRect(0, 0, this.w, this.h);
                  for (var i = 0; i < this.hearts.length; i++) {
                    
                    
                    //else{
                    var num = Math.floor(Math.random() * 3); // 0...4
                    if(heartsOutside[i] != ""){num = heartsOutside[i]}
                    var heart = this.hearts[i];
                    heartsOutside[i] = num;
                    heart.image = new Image();
                    heart.image.style.height = heart.height;
                    
                    heart.image.src = imagesArray[num];
                    this.ctx.globalAlpha = heart.opacity;
                    this.ctx.drawImage (heart.image, heart.x, heart.y, heart.width, heart.height);
                  }
          this.move();
        },
        move: function() {
          for(var b = 0; b < this.hearts.length; b++) {
            var heart = this.hearts[b];
            heart.y += heart.ys;
            if(heart.y > this.h) {
              heart.x = Math.random() * this.w;
              heart.y = -1 * this.heartHeight;
              heartsOutside[b] = ""
            }
          }
        },
        setCanvasSize: function() {
          this.canvas.width = window.innerWidth;
          this.canvas.height = window.innerHeight;
          this.w = this.canvas.width;
          this.h = this.canvas.height;
        },
        initialize: function() {
          this.canvas = $('#canvas')[0];

          if(!this.canvas.getContext)
            return;

          this.setCanvasSize();
          this.ctx = this.canvas.getContext('2d');

          for(var a = 0; a < this.maxHearts; a++) {
            var scale = (Math.random() * (1 - this.minScale)) + this.minScale;
            this.hearts.push({
              x: Math.random() * this.w,
              y: Math.random() * this.h,
              ys: Math.random() + 1,
              
              height: scale * this.heartHeight,
              width: scale * this.heartWidth,
              opacity: scale,
              image: imagesArray[Math.floor(Math.random()*imagesArray.length)]
            });
          }

          setInterval($.proxy(this.draw, this), 30);
        }
      };

      $(document).ready(function(){
        HeartsBackground.initialize();
      });

body {
  background: #B7004E;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>