在第一次加载或使用ctrl + f5重新加载时在firefox上的画布上绘制图像不起作用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在第一次加载或使用ctrl + f5重新加载时在firefox上的画布上绘制图像不起作用相关的知识,希望对你有一定的参考价值。
我的问题是在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并且代码在中执行
$(文件)。就绪
功能。
尝试在图像的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上的画布上绘制图像不起作用的主要内容,如果未能解决你的问题,请参考以下文章
防止用户使用 jquery 或 javascript 重新加载页面 [重复]
UITableView 在重新加载页面时在单元格顶部显示额外的分隔线
Jquery Mobile:“pageshow”事件仅在 Shift F5(完全重新加载)时触发,但在加载另一个页面或具有不同查询的同一页面时不会触发