文字被图片遮住

来源：9-2 编程练习

qq_林二爷_0

2018-09-13 18:30:13

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>canvas</title>
		<style type="text/css">
			canvas{
				background: lightblue;
			}
			#offCanvas{
				display: none;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="500" height="500">
			该浏览器不支持canvas 
		</canvas>
		<canvas id="offCanvas" width="500" height="500">
			该浏览器不支持canvas 
		</canvas>
		<script type="text/javascript">
			var canvas=document.getElementById("myCanvas");
			var ctx=canvas.getContext("2d");
			var offcanvas=document.getElementById("offCanvas");
			var offctx=canvas.getContext("2d");
			
			var img=new Image();
			img.src="http://climg.mukewang.com/5aa6633400017bc704170220.jpg";
			img.onload=function(){
				ctx.drawImage(img,0,0)
			}
			
			var str="=www.imooc.com=";
			offctx.font="25px sans-serif";
			offctx.fillStyle="rgba(255,255,255,0.5)";
			offctx.fillText(str,100,230);
			
			ctx.drawImage(offcanvas,0,0,offcanvas.width,offcanvas.height,0,0,canvas.width,canvas.hieght);
	    </script>
	</body>
	
</html>

写回答

1回答