如何解决画布图像故障
| 我在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,myc.width,myc.height);
context.drawImage(image,dw,dh);
}
当按下箭头时,这样的功能被称为
function update(){
if(canvas()){
context.clearRect(0,myc.height) //maybe bloat
myc.width = image.width;
myc.height = image.height;
dw = image.width;
dh = image.height;
context.drawImage(image,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()
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。