案例还有问题吗
来源：2-2 Canvas坐标体系（2）
unbreakable_全栈
2020-09-30 10:07:48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子名片生成器</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="left-div">
<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>
<div class="line">
<button id="generateBtn">生成名片</button>
</div>
</div>
<div class="right-div">
<canvas id="canvas">您的浏览器不支持canvas</canvas>
<canvas id="animCanvas">您的浏览器不支持canvas</canvas>
</div>
<script src="./js/index.js"></script>
</body>
</html>
--------------------
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
ctx.canvas.width = 600
ctx.canvas.height = 100
// 加载图片
var img = new Image()
img.src = 'img/logo.png'
img.onload = function () {
ctx.drawImage(img, 10, 10)
}
var generateBtn = document.getElementById('generateBtn')
generateBtn.onclick = function () {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
var linearGradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, ctx.canvas.height)
linearGradient.addColorStop(0.5, 'rgb(0,0,0)');
linearGradient.addColorStop(1, 'rgb(133,133,133)');
ctx.fillStyle = linearGradient
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
// logo图像
ctx.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
ctx.font = 'bold 30px sans-serif'
ctx.fillStyle = '#fff'
ctx.fillText(name, 105, 35)
nameWidth = ctx.measureText(name).width;
ctx.font = 'bold 20px sans-serif'
ctx.fillText(address, 105, 60);
ctx.fillText(job, 105, 85);
addressWidth = ctx.measureText(address).width;
jobWidth = ctx.measureText(job).width;
if (maxWidth < nameWidth) {
maxWidth = nameWidth
}
if (maxWidth < addressWidth) {
maxWidth = addressWidth
}
if (maxWidth < jobWidth) {
maxWidth = jobWidth
}
// 绘制口号
var slogan = document.getElementById('slogan').value || '请输入口号'
ctx.save()
// 图形变换
ctx.rotate(-0.1)
ctx.translate(0, 50);
// 阴影
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 1.5;
ctx.fillStyle = "#ddd";
// 计算口号的位置
var solganWidth
solganWidth = ctx.measureText(slogan).width;
var offset = (ctx.canvas.width - 115 - maxWidth - solganWidth) / 2;
ctx.fillText(slogan, 115 + maxWidth + offset, 50)
// 画曲线
ctx.beginPath();
ctx.moveTo(115 + maxWidth + offset, 70);
ctx.quadraticCurveTo(115 + maxWidth + offset, 50, 115 + solganWidth + maxWidth + offset, 60);
ctx.strokeStyle = "#ddd";
ctx.stroke()
ctx.restore()
}
// 触发click事件
generateBtn.click();
// 创建和设置animCanvas，该canvas才是真正的显示
var animCanvas = document.getElementById('animCanvas')
var animCtx = animCanvas.getContext('2d')
animCtx.canvas.width = 600
animCtx.canvas.height = 100
setInterval(() => {
// 擦出画布
animCtx.clearRect(0, 0, animCtx.canvas.width, animCtx.canvas.height);
// 把离屏canvas的内容画进来
animCtx.drawImage(canvas, 0, 0, animCtx.canvas.width, animCtx.canvas.height,
0, 0, ctx.canvas.width, ctx.canvas.height);
}, 100)
1回答
-
同学你好，测试同学提供的html和js（css使用的是源码中提供的），效果是正确的，继续加油，祝学习愉快~
0
相似问题