画布图像问题答案

【问题标题】：Canvas Image trouble画布图像问题
【发布时间】：2011-09-05 20:59:43
【问题描述】：

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

这是图像对象

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

【问题讨论】：

很难从这段代码中判断您的问题是与画布有关，还是与我们看不到代码的myImage 对象有关。我猜这个问题根本不涉及画布。您是否尝试过将myImage.num 和myImage.src[myImage.num] 记录到控制台？
myImage 对象现在只是一个包含图像路径的数组。我尝试记录 myImage.num 并且日志显示正确的数字，但 Firefox 中的画布没有。如果我在控制台中调用 update() 函数，它将更改为正确的图像，并且 update() 不会调用 myImage.num 变量。

标签： javascript firefox html canvas

【解决方案1】：

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

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

【讨论】：