代码用网上别人的,结果是进去了定时执行代码,可是图片还是旧的,不会定时刷新.
<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>
|      1Lax      2021-01-03 12:20:52 +08:00 每次执行后 `image.src` 都一样,需要看图片是不是被缓存了。 可以在 URL 里增加一个随机参数。 |