画布drawImage不显示

问题描述

我正在优化我的画布，发现了这篇文章： https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

他们在这里提到：Don’t scale images in drawImage

加载时将各种尺寸的图像缓存在屏幕外的画布上，而不是在drawImage（）中不断缩放它们。

我试图这样实现：初始化：

//Initialize    

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d",{ alpha: false }); 
var particles = [];
    for(var i = 0; i < 100; i++) {
        let image = new Image()
        image.src = apidata[i].imageLarge
    
        var m_canvas = document.createElement('canvas');
        m_canvas.width = 50;
        m_canvas.height = 50;
        var tmp = m_canvas.getContext("2d");
        tmp.drawImage(image,50,50);
    
        //Added this to wait for image
        particles.push({
            x: Math.random()*canvas.width,//x-coordinate
            y: Math.random()*canvas.height,//y-coordinate
            r: Math.random()*4+1,//radius
            d: Math.random()*mp,//density
            image: m_canvas
        })
    }

绘图功能：

function draw() {

    ctx.clearRect(0,canvas.width,canvas.height);
    for(var i = 0; i < mp; i++) {
        var p = particles[i];
        ctx.drawImage(p.image,p.x,p.y);
    }
}

运行这段代码时，我没有收到错误，也看不到画布上绘制的任何图像。因此，我认为问题与图像初始化功能有关。我哪里出错了？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

drawimage html javascript