html5 drawImage图片不显示问题

html5 canvas画图,调用drawImage却没有图片显示,确认图片路径没有错

<!DOCTYPE html>
<html>
	<script type="text/javascript">
		var $ = function  (id) {
			return document.getElementById(id);
		}
	</script>
<body>
	<canvas id="cc" width="200" height="200"></canvas>
	<script type="text/javascript">
		var c  = $("cc");
		var cxt = c.getContext("2d");
		
		// cxt.fillStyle = "#FF0000";
		// cxt.fillRect(0,0,150,75);

		var img = new Image();
		img.src = "4.png";
		cxt.drawImage(img, 0, 0);

	</script>
</body>
</html>


上网查了下原来是图片还没有加载完成的原因,图片没有加载完就开始drawImage了,将drawImage放在图片的onload事件里,图片成功显示

<!DOCTYPE html>
<html>
	<script type="text/javascript">
		var $ = function  (id) {
			return document.getElementById(id);
		}
	</script>
<body>
	<canvas id="cc" width="200" height="200"></canvas>
	<script type="text/javascript">
		var c  = $("cc");
		var cxt = c.getContext("2d");
		
		// cxt.fillStyle = "#FF0000";
		// cxt.fillRect(0,0,150,75);

		var img = new Image();
		img.src = "4.png";
		img.onload = function () {
			cxt.drawImage(img, 0, 0);
		}
	</script>
</body>
</html>



你可能感兴趣的:(html5 drawImage图片不显示问题)