老师看一下
来源：6-7 完成案例文字图片显示和变换
qq_慕瓜7049344
2020-08-25 16:35:25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 250px;
padding:40px 20px;
margin: 100px;
background: #A4A298;
position: relative;
}
input {
width: 270px;
height: 25px;
font-size:5px;
border-radius: 10px;
border: none;
padding: 0 15px;
color: gray;
margin-bottom: 25px;
outline: none;
}
#btn {
width: 120px;
height: 35px;
position: absolute;
left: 100px;
bottom: 50px;
color: white;
background: #302F30;
border:none;
outline: none;
border-radius: 20px;
}
canvas {
background: #EFE9D5;
position: absolute;
left: 435px;
top: 100px;
}
</style>
</head>
<body>
<div class="box">
<input type="text" name="" id="name" placeholder="姓名">
<input type="text" name="" id="site" placeholder="地址">
<input type="text" name="" id="occupation" placeholder="职业">
<input type="text" name="" id="slogan" placeholder="口号">
<button id="btn">生成名片</button>
</div>
<canvas id="canvas" >
你的浏览器不支持
</canvas>
<script>
/** @type {HTMLCanvasElement}*/
var canvas = document.getElementById('canvas'),
btn = document.getElementById('btn'),
xt = canvas.getContext('2d');
canvas.width='780';
canvas.height='330';
function draw(name,site,occupation,slogan){
xt.beginPath();
var a = xt.createLinearGradient(100,100,800,100);
a.addColorStop(0,'black');
a.addColorStop(1,'gray');
xt.fillStyle=a;
xt.fillRect(100,100,800,150);
xt.fill();
var img =new Image();
img.src = 'http://climg.mukewang.com/59859f4d00014f1503000100.jpg';
img.onload = function () {
xt.drawImage(img,45,26,40,50,150,150,50,50)
}
xt.arc(175,170,40,0,2*Math.PI,true)
xt.fillStyle='#DC161B';
xt.fill();
var str = name||'请输入名字',
str1 = site||'请输入住址',
str2 = occupation||'请输入职业',
str3 =slogan||'请输入口号';
xt.font = 'bold 20px 微软雅黑';
xt.fillStyle='white';
xt.fillText(str,225,150);
xt.font = 'bold 15px 微软雅黑';
xt.fillText(str1,225,170);
xt.fillText(str2,225,190);
xt.save();
xt.rotate(Math.PI/-20);
xt.fillText(str3,470,260);
xt.restore();
}
draw();
var draws = {
name:document.getElementById('name'),
site:document.getElementById('site'),
occupation:document.getElementById('occupation'),
slogan:document.getElementById('slogan')
}
btn.onclick = function () {
draw(draws.name.value,draws.site.value,draws.occupation.value,draws.slogan.value)
}
</script>
</body>
</html>
1回答
-
好帮手慕慕子
2020-08-25
同学你好，老师测试同学的代码，效果实现是正确的，同学具体是哪里有问题呢，可以详细描述下，便于帮助同学准确高效的解决问题，祝学习愉快~
0
相似问题