画布图像故障

Canvas Image trouble

本文关键字：故障 图像 布图像      更新时间：2023-09-26

我在JavaScript和Canvas方面遇到问题，尤其是在Firefox中。我正在尝试创建一个画布图像查看器，它将在浏览器中启用画布来代替标准img标记时运行。单击箭头时，Javascript会更改src路径数组中的图像。出于某种原因，Firefox总是有一个img不同步。当我在chrome中测试它时，img是同步的，但第一个没有显示。

这是图像对象

var image = new Image();
image.src = myImage.src[0];

这是我最初的画布初始化

if(canvas()){ //canvas stuff
var myc = document.createElement('canvas');
myc.id='mycanvasx';
mycanvas = document.getElementById('mycanvasx');
myc.width = image.width;
myc.height = image.height;
//viewer.replaceChild(myc, scroller);
viewer.appendChild(myc);
var context = myc.getContext("2d");
dw = image.width;
dh = image.height;
context.clearRect(0, 0, myc.width, myc.height);
context.drawImage(image, 0, 0, dw, dh); 
}

当按下箭头时，这样的功能被称为

function update(){ 
if(canvas()){
context.clearRect(0,0,myc.width, myc.height) //maybe bloat
myc.width = image.width;
myc.height = image.height;
dw = image.width;
dh = image.height;
context.drawImage(image, 0, 0, dw, dh); 
} 
} 
function left(){ //these move the image through the source array
if(myImage.num > 0){myImage.num--;}else{
myImage.num = (myImage.src.length-1)}
image.src = myImage.src[myImage.num];
scroller.src = image.src;
update();
x=0;
}

我知道我一定错过了一些简单的东西。我使用的是firefox 4.0.1和chrome 11

您正在设置图像的src，然后立即将其绘制到画布中。但是图像加载是异步的。因此，您在加载新的src之前绘制它；由于您一直在重复使用同一个图像，因此此时它仍然显示以前的图像。

您希望在image上的onload侦听器上运行update()。

相关文章：