为什么按钮事件中图片的加载要在线性渐变之后才能显示？

来源：9-3 完成案例动画部分

Edward666

2019-11-21 13:08:31

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
html,body{height: 100%;}/*给HTML和body的高度都设置为100%，它们的高度才是整个屏幕*/
.container{width: 100%;height: 100%;}
.left{width: 30%;height: 100%;float: left;background-color: #a4a296;text-align: center;}
.line{margin-top: 30px;}
.line:first-child{margin-top: 200px;}
.line input{width: 300px;height: 30px;border-radius: 15px;padding-left: 15px;outline: none;border: none;}
.left button{width: 100px;height: 30px;margin-top: 30px;background-color: #222;border-radius: 15px;color: #DDD;border: none;outline:none;cursor: pointer;position: relative;}/*设置相对定位可以设置left等属性*/
.left button:hover{background-color: #000;color: #fff;}
.left button:active{left: 1px;top: 1px;}/*active按钮点击时样式*/
.right{width: 70%;height: 100%;float: right;background-color: #eee9d3;text-align: center;position: relative;}

.right canvas{position: absolute;top: 200px;left: 50%;margin-left: -300px;}
/*#cardCanvas{display: none;}*/
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="line"><input type="text" id="name" placeholder="姓名"/></div>
<div class="line"><input type="text" id="address" placeholder="地址"/></div>
<div class="line"><input type="text" id="job" placeholder="职业"/></div>
<div class="line"><input type="text" id="slogan" placeholder="口号"/></div>
<button id="btn">生成名片</button>
</div>
<div class="right">
<canvas id="cardCanvas"></canvas>
<canvas id="animCanvas"></canvas>
</div>
</div>

<script type="text/javascript">
var cardCanvas = document.getElementById('cardCanvas');
var cardCtx = cardCanvas.getContext('2d');
cardCanvas.width = 600;
cardCanvas.height = 100;
// 加载图片
var img = new Image();
img.src = 'img/logo.png';
img.onload = function(){
cardCtx.drawImage(img, 10, 10);
};

var btn = document.getElementById('btn');
btn.onclick = function(){
cardCtx.clearRect(0,0,cardCanvas.width,cardCanvas.height);
//线性渐变
var linearGradient = cardCtx.createLinearGradient(0,0,cardCanvas.width,cardCanvas.height);
linearGradient.addColorStop(0.5,'rgb(0,0,0)');
linearGradient.addColorStop(1,'rgb(133,133,133)');
cardCtx.fillStyle = linearGradient;
cardCtx.fillRect(0,0,cardCanvas.width,cardCanvas.height);
//因为上面会清除画布，所以这里需要重新绘制图片。
cardCtx.drawImage(img, 10, 10);
//获取名字、地址、职业、口号,绘制，并计算长度
var name = document.getElementById('name').value || '请输入名字';
var address = document.getElementById('address').value || '请输入地址';
var job = document.getElementById('job').value || '请输入地址';
var nameWidth,addressWidth,jobWidth,maxWidth = 0;
cardCtx.font = 'bold 30px sans-serif';
cardCtx.fillStyle = '#fff';
cardCtx.fillText(name, 105, 35);
nameWidth = cardCtx.measureText(name).width;
cardCtx.font = 'bold 20px sans-serif';
cardCtx.fillText(address, 105, 60);
addressWidth = cardCtx.measureText(address).width;
cardCtx.fillText(job,105,85);
jobWidth = cardCtx.measureText(job).width;
//获取姓名，地址，工作中的最宽的文本
if (maxWidth<nameWidth) {
maxWidth = nameWidth;
}
if (maxWidth<addressWidth) {
maxWidth = addressWidth;
}
if (maxWidth<jobWidth) {
maxWidth = jobWidth;
}
cardCtx.save();
//进行图形变换
cardCtx.translate(0, 50);
cardCtx.rotate(-0.1);
//给后面的文字、曲线添加阴影
cardCtx.shadowOffsetX = 10;
cardCtx.shadowOffsetY = 10;
cardCtx.shadowColor = 'rgba(0,0,0,0.5)';
cardCtx.shadowBlur = 2;
//计算口号的位置
var slogan = document.getElementById('slogan').value || '请输入口号';
var sloganWidth = cardCtx.measureText(slogan).width;
//计算出口号离左边姓名、地址、工作中最宽的文本的距离
var offset = (cardCanvas.width-115-maxWidth-sloganWidth)/2;//其中115是图标那一截的宽度
cardCtx.fillStyle = '#ddd';
cardCtx.fillText(slogan, 115+maxWidth+offset, 50);
//贝塞尔曲线
cardCtx.beginPath();
cardCtx.moveTo(115+maxWidth+offset, 70);
cardCtx.quadraticCurveTo(115+maxWidth+offset, 50,115+maxWidth+offset+sloganWidth,60);
cardCtx.strokeStyle = '#ddd';
cardCtx.stroke();
cardCtx.restore();
}
btn.click();

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

将按钮中的图片加载放在创建线性渐变之前的画，点击按钮图片不会加载。

写回答

1回答