在第一次加载或用Ctrl + F5重新加载画布上的图像在图形上不工作

我的问题是，图像不是在firefox（版本34）的文档的第一次加载画布上绘制。它在IE中工作。在第一次加载或用Ctrl + F5重新加载画布上的图像在图形上不工作

我创建了一个最小示例页面来说明我的问题。您应该可以通过使用代码创建HTML文件来重现，使用任何png文件并在Firefox中加载文件。宽度和高度是我的图片的宽度和高度，只是使用您的图片大小。

我在画布之前添加了img标签，以便在执行javascript代码之前加载图像。但是如果在第一次加载之后再次按下F5，画布只会绘制图像。按下Ctrl + F5，图像消失。 F5又回来了......你得到了照片。如果缓存被清空，绘图不起作用。

有谁知道我是否可以阻止这在Firefox中（因为它在IE中工作，没有测试铬）？绘画之前我忽视了一些我应该做的事情吗？
也许我做错了什么？

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
    <img src="ball.png"/> 
    <canvas id="canvas" height="100" width="100"></canvas> 
    <script> 
     var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); 
     var internal_image = new Image(); 
     internal_image.src = "ball.png"; 
     internal_image.width = 18; 
     internal_image.height = 19; 
     context.drawImage(internal_image, 10, 10); 
    </script> 
</body>

这仅是为了说明一个文件样品。其实我使用jQuery和代码在

$（文件）。就绪

功能执行。

来源

2014-12-06 Uwe

尝试在图像的load函数内调用drawImage函数以确保图像在尝试绘制之前实际加载。

var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); 
var internal_image = new Image(); 
internal_image.src = "ball.png"; 
internal_image.width = 18; 
internal_image.height = 19; 

internal_image.addEventListener("load", function() { 
    context.drawImage(internal_image, 10, 10); 
}, false);

来源

2014-12-06 18:22:04

这是行得通的。你碰巧知道为什么原始代码在Firefox中不起作用，但在IE中？ – Uwe 2014-12-06 18:45:02

最有可能是运行在IE中:)在调用'.drawImage（）'之前，最有可能的是图像被加载了，这也解释了为什么它也可以从缓存中使用FF。 – 2014-12-07 11:08:15

在第一次加载或用Ctrl + F5重新加载画布上的图像在图形上不工作

回答

相关问题