如何解决画布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 举报,一经查实,本站将立刻删除。