请老师检查

来源：6-7 完成案例文字图片显示和变换

迷失的小麦

2020-03-01 11:43:07

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	*{margin: 0;padding: 0;}
	input{border: none;outline: none;}
	.clearfixed {zoom: 1;}
	.clearfixed::after {display: block;clear: both;content: "";}
	.container{width: 1000px;margin: 100px auto;}
	.box{float: left;width: 200px;height: 270px;padding-top: 30px;background-color: burlywood;}
	#canvas{background-color: antiquewhite;float: left;}
	#xingming,#dizhi,#zhiye,#kouhao{width: 160px;height: 20px;display: block;line-height: 20px;margin: 0 auto 20px;text-indent: 10px;border-radius: 10px;font-size: 12px;}
	#button{width: 90px;height: 30px;display: block;line-height: 30px;background-color: black;color: white;text-align: center;margin: 0 auto;font-size: 12px;border-radius: 15px;}
</style>
</head>

<body>
	<div class="container clearfixed">
		<div class="box">
			<input type="text" id="xingming" placeholder="姓名">
			<input type="text" id="dizhi" placeholder="地址">
			<input type="text" id="zhiye" placeholder="职业">
			<input type="text" id="kouhao" placeholder="口号">
			<input type="button" id="button" value="生成名片">
		</div>
		<canvas width="800px" height="300px" id="canvas">您的浏览器不支持canvas</canvas>
	</div>
</body>
<script>
	var yuansu={
		xingming:document.getElementById('xingming'),
		dizhi:document.getElementById('dizhi'),
		zhiye:document.getElementById('zhiye'),
		kouhao:document.getElementById('kouhao'),
		button:document.getElementById('button'),
		canvas:document.getElementById('canvas')
	};
	yuansu.ctx=yuansu.canvas.getContext('2d');
	yuansu.ctx.translate(100,100);
	
	yuansu.img = new Image();
	yuansu.img.src = "logo.png";
	yuansu.img.onload = function () {
		yuansu.ctx.drawImage(yuansu.img,15,15,120,120);
	};
	
	yuansu.linearGradient = yuansu.ctx.createLinearGradient(0,75,600,75);
	yuansu.linearGradient.addColorStop(0,'#000');
	yuansu.linearGradient.addColorStop(1,'#fff');
	yuansu.fillStyle=yuansu.linearGradient;
	yuansu.ctx.fillRect(0,0,600,150);
	
	yuansu.button.onclick=function(){
		
		yuansu.nameText = yuansu.xingming.value||'请输入姓名';
		yuansu.addressText = yuansu.dizhi.value||'请输入地址';
		yuansu.occupationText = yuansu.zhiye.value|| '请输入职业';
		yuansu.sloganText = yuansu.kouhao.value||'请输入口号';

		yuansu.ctx.font = '30px Microsoft-yahei';
		yuansu.ctx.fillStyle = '#fff';
		yuansu.ctx.fillText(yuansu.nameText,145,55);

		yuansu.ctx.font = '20px Microsoft-yahei';
		yuansu.ctx.fillText(yuansu.addressText,145,85);
		yuansu.ctx.fillText(yuansu.occupationText,145,115);
		
		yuansu.ctx.rotate(Math.PI / -18);
		yuansu.ctx.fillText(yuansu.sloganText,445,85);
	};
	
	yuansu.button.click();
</script>
</html>

添加yuansu.button.click();之后，影响了口号和图片的位置（请老师在修改的时候告诉我原因，谢谢）
当输入文字后，原来的文字并没有清除（如：请输入地址）
还请老师回答一下之前的别的问题，我已在那里给老师留言
https://class.imooc.com/course/qadetail/197817
https://class.imooc.com/course/qadetail/197954

写回答

1回答