代码用网上别人的,结果是进去了定时执行代码,可是图片还是旧的,不会定时刷新.
<canvas id="myCanvas" width="472" height="472" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<FONT SIZE=1 id="F1"></FONT>
<FONT SIZE=1 id="F2"></FONT>
<script>
var i_height = 472;
var i_width = 472;
var pic = document.getElementById("myCanvas");
pic.style.height = i_height + "px";
pic.style.width = i_width + "px";
</script>
<script type="text/javascript">
var n = 0;
var image = new Image();//放入函数里面:浏览器运行一分钟左右系统内存用到高达 90%,故做一个全局的反冲图片
function changeImage() {
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
//ctx.restore();
image.src = "/static/wx_login1.jpg";
image.onload = function () //确保图片已经加载完毕
{
n = n + 1;
n = n % 100;
document.getElementById("F1").innerHTML = "刷新:" + n;
if (image.complete)//如果图片加载完成,绘制
cxt.drawImage(image, 0, 0);
else
alert(image.complete);
}
image.onerror = function () {
document.getElementById("F2").innerHTML = "error N:" + n;
};
//ctx.save();
}
setInterval("changeImage();", 2000);
</script>
1
Lax 2021-01-03 12:20:52 +08:00
每次执行后 `image.src` 都一样,需要看图片是不是被缓存了。
可以在 URL 里增加一个随机参数。 |