我的问题是，在 Firefox(版本 34)中首次加载文档时，图像未绘制在 Canvas 上。它可以在 IE 中运行。
我创建了一个最小示例页面来说明我的问题。您应该能够通过使用代码创建 HTML 文件、使用任何 png 文件并在 Firefox 中加载该文件来进行重现。宽度和高度是我图片的宽度和高度，用你的图片尺寸即可。
我在 Canvas 之前添加了 img 标签，以便在 javascript 代码执行之前加载图像。但如果我在第一次加载后再次按 F5， Canvas 只会绘制图像。按 Ctrl+F5，图像就消失了。 F5 再次返回...您明白了。如果缓存被清空，绘图将无法工作。
有谁知道我是否可以在 Firefox 中阻止这种情况(因为它在 IE 中工作，没有测试 chrome)？我是否忽略了绘画前应该做的事情？
也许我做错了什么？
<!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并且代码在
中执行$(document).ready
函数。
最佳答案
尝试在图像的 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);
关于javascript - 首次加载或使用 ctrl+f5 重新加载时在 Firefox 中的 Canvas 上绘制图像不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27334856/