Question

我的问题是在firefox（版本34）中第一次加载文档时画布上没有绘制图像。它适用于IE。

我创建了一个最小样本页面来说明我的问题。您应该能够通过使用代码创建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，代码在

中执行

（文档）$。就绪

功能

Answer 1

尝试调用图片的drawImage功能中的load功能，以确保在尝试绘制图像之前实际加载图像。

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);

在第一次加载或使用ctrl + f5重新加载时在firefox上的画布上绘制图像不起作用

1 个答案: