javascript - 由 Javascript 添加的 Img 显示 0x0 像素

Question

我正在尝试将相同的小图像多次添加到 Canvas 中。它在检查元素中正确显示，除了图像具有 0x0 像素(自然像素为 200x45 或其他)。

代码如下:

$(document).ready(function(){
var bgd1 = document.getElementById('background1'),
    bgd2 = document.getElementById('background2'),
    WIDTH,
    HEIGHT,
    nbgd1,
    nbgd2,
    bgd1imgs = [];

setBackgroundSize();
drawbgd1();

function setBackgroundSize() {
    WIDTH = document.documentElement.clientWidth,
    HEIGHT = document.documentElement.clientHeight;
    bgd1.setAttribute("width", WIDTH);
    bgd1.setAttribute("height", HEIGHT);
    bgd2.setAttribute("width", WIDTH);
    bgd2.setAttribute("height", HEIGHT);
}

window.addEventListener('resize', setBackgroundSize, false);


function addbgd1(){
    this.obj = document.createElement('img');
    this.obj.src = 'img/bgd1.png';
    this.obj.classList.add('bgd1img');
    this.obj.width = 100;
    this.obj.height = 22;
    this.obj.style.top = Math.floor((window.innerHeight * Math.random())) + 'px';
    this.obj.style.left = Math.floor((window.innerWidth * Math.random())) + 'px';
    bgd1.appendChild(this.obj);
}


function drawbgd1(){
    nbgd1 = Math.floor(WIDTH / 100);
    for(var i=0; i<nbgd1 ; i++){
        bgd1imgs.push(new addbgd1());
    }
}
});

在这里完全迷失了。我尝试了几种 CSS 变体，但没有区别。

这是 CSS:

#background1{
    position:fixed;
    z-index:-20;
    top:0;
    left:0;
    background-color:#000;   
    overflow:hidden;
}

.bgd1img{
    z-index:180;
    visibility:visible;
    display:block;
    height:22px;
    width:100px;
    position:fixed;
}

谢谢!

Answer 1

我已经找到解决办法了。仍然不知道为什么旧的不起作用(应该？)

这是我当前的解决方案:

$(document).ready(function(){
var bgd1 = document.getElementById('background1'),
    bgd2 = document.getElementById('background2'),
    ctx1 = bgd1.getContext('2d'),
    WIDTH,
    HEIGHT,
    nbgd1,
    randtop =  [],
    randleft = [],
    bgd1imgs = [];



setBackgroundSize();    

function setBackgroundSize() {
    WIDTH = document.documentElement.clientWidth,
    HEIGHT = document.documentElement.clientHeight;
    bgd1.setAttribute("width", WIDTH);
    bgd1.setAttribute("height", HEIGHT);
    bgd2.setAttribute("width", WIDTH);
    bgd2.setAttribute("height", HEIGHT);
    nbgd1 = Math.floor(WIDTH / 100);
    for (var i=0;i<nbgd1;i++){
        randtop[i] =  Math.floor(window.innerHeight * Math.random());
        randleft[i] = Math.floor(window.innerWidth * Math.random());
    }
    drawbgd1(nbgd1,randtop,randleft);
}
window.addEventListener('resize', setBackgroundSize, false);

function addbgd1(randtop,randleft){
    newbgd1 = new Image();
    newbgd1.src = 'img/bgd1.png';
    newbgd1.classList.add('bgd1img');
    newbgd1.onload = function(){
        ctx1.drawImage(newbgd1,randleft,randtop,100,22);
    }
}

function drawbgd1(nbgd1,randtop,randleft){        
    for(var i=0; i<nbgd1 ; i++){
        bgd1imgs.push(new addbgd1(randtop[i],randleft[i]));
    }
}
});