我如何在 canvas animation 上写文字
[英]How can i write text over a canvas animation
问题描述
所以我正在为自己制作一个在线个人资料，并且正在研究如何使登录页面尽可能具有吸引力。 遇到 HTML5 Canvas，做了一些关于制作交互式背景的研究和实验，这就是结果（在 codepen 中）。
现在，我想在 canvas 的中间写上我的名字，文字在 animation 的前面。
animation 在递归循环中被调用，初始化 function 在调整页面大小或刷新时被调用。
问题是，我无法获取前面的文本，而且出于某种奇怪的原因，当页面调整大小时我的文本会缩小。
这是我的笔
https://codepen.io/hamza-tariq-khan/pen/mzKMNd
<!doctype html5>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Canvas Resize</title>
<style>
canvas{
/* border: 1.5px solid black; */
/* background-color: red; */
display: block;
}
body{
margin: 0;
overflow-x: hidden;
}
.wrapper{
margin : 20px;
}
</style>
</head>
<body>
<canvas></canvas>
<script src="script.js"></script>
<div class="wrapper">
<h1>This is a sample sentence</h1>
</div>
</body>
</html>
这是我想要实现的想法。 （Mathew williams 在移动背景前的文字）
2 个解决方案
解决方案1
0 2019-02-21 17:07:59
如果我是你，我会跳过在画布上渲染文本并将一些CSS规则应用到div ，使其显示在顶部。 CSS方法可提高性能并改善可访问性。 使用屏幕阅读器的盲人将能够找出div ，但不支持在canvas阅读文本。 最重要的是，推理HTML和CSS要比推理canvas元素中的文本呈现要容易得多。 你多久会这样做？ 当您在一个月，六个月或一年内回来更改代码时，更改HTML / CSS将比重新考虑画布渲染逻辑更容易！
为此，请使用以下CSS for div wrapper ：
.wrapper{
position: absolute;
top: 0px;
color: red;
font-size: 60px;
margin : 20px;
}
position: absolute允许div与画布重叠，并且属性top ， bottom ， left和right允许您控制div从其父级边缘偏移的距离（在这种情况下， wrapper是body的子级）。 我调整了颜色和字体大小只是为了让它显而易见。
这是一个工作示例的链接： https ： //codepen.io/anon/pen/LqoroR
解决方案2
0 2022-12-25 17:33:32
var canvas = document.getElementById("dm_graphs"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, canvas.width, canvas.height);
<style> body, canvas, html { font: 24px sans-serif; height: 100hv; width: 100%; margin: 0; padding: 0; background: #888; color: #135; overflow: hidden } #fs { position: relative } #txt, canvas { position: absolute } #txt { color: yellow; margin: 50px; font: 24px subpixel-antialiased Noto Sans Samaritan; background: transparent } </style>
<body> <div id="fs"> <canvas id="dm_graphs" width="400" height="300"></canvas> <div id="txt">This is a text over a canvas.</div> </div> </body>
如何使用画布元素创建随时间推移的微光动画？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.