画布图像问题

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

这里是图像对象

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

这是我最初的帆布intialization

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

来源

2011-05-31 joel

从这段代码中很难判断你的问题是否与canvas完全相关，或者使用'myImage'对象，其代码是我们看不到的。我猜测这个问题根本不涉及画布。您是否尝试过将'myImage.num'和'myImage.src [myImage.num]'记录到控制台？ – nrabinowitz 2011-05-31 23:40:03

myImage对象现在只是一个包含图像路径的数组。我试过记录myImage.num，日志显示正确的数字，但Firefox中的画布不显示。如果我在控制台中调用update（）函数，它将更改为正确的图像，update（）不会调用myImage.num变量。 – joel 2011-05-31 23:44:55

您正在设置图像的src，然后立即将其绘制到画布中。但图片加载是异步的。所以你在你设置的新的src被加载之前绘制它;由于您不断重复使用相同的图像，因此它仍然会在此时显示之前的图像。

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

来源

2011-06-01 01:30:22

谢谢你是救生员 – joel 2011-06-01 01:47:27

画布图像问题

回答

相关问题