Question

这是一个赋值，我应该让用户键入两个小字符串文本，这些文本将应用于画布内的图像。但是，他们没有被展示。我尝试了在类似问题上建议的“onload”方法，但它没有用。有什么帮助吗？

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
	<body>

		<img id="imgBgMeme" src="meme.jpg" alt="image meme" style="display:none;"/>
	
	    <canvas id="myCanvas" width="500" height="500" id="memecanvas" style="border:1px solid #000000;"></canvas><br>
		
		
		<div>
		O primeiro texto digitado foi:<span id="texto1"></span><br/>
		O segundo texto digitado foi:<span id="texto2"></span><br/>
		</div>

	
		<script type="text/javascript">
			
			
		//typed text test
		var txt_1 = prompt("Sentence 1:");
		var txt_2 = prompt("Sentence 2:");
		
		//typed text
		document.getElementById("texto1").innerHTML = txt_1;
		document.getElementById("texto2").innerHTML = txt_2;
				
		var canvas = document.getElementById('myCanvas');
		var context = canvas.getContext('2d');
			  
		var image = document.getElementById("imgBgMeme");
		image.onload = function() {
    	
		ctx.drawImage(image, 0, 0, cv.width, cv.height); 
	}
		
		//custom txt
		ctx.font = "36pt Impact";
		ctx.textAlign = center;
	
			
		// draw txts over image
		ctx.fillText(txt_1, cv.width / 2, 60); 
		ctx.strokeText(txt_1, cv.width / 2, 60);
			
		ctx.fillText(txt_2, cv.width / 2, 460); 
		ctx.strokeText(txt_2, cv.width / 2, 460);

		</script>
	</body>
</html>

html canvas drawimage方法 - 图像和文本不显示

0 个答案: