Question

我的问题是针对此插件的：https://codepen.io/bferioli/pen/qEGaPp

我正在尝试在此画布中使用几张图片，但找不到方法。基本上，我想要的是随机显示选择的图像（10张或更多），而不是仅显示心脏。

我认为我必须编辑该CodePen代码段的这一部分：

error 400

此处是我的密码：https://codepen.io/Le-future/pen/eKaarK

  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);
    }

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>

更改坠落的心背景动画以使用多个随机图像

1 个答案: