javascript - 我如何在 Canvas 动画上写文字-6ren

javascript - 我如何在 Canvas 动画上写文字

转载作者：可可西里更新时间：2023-11-01 14:59:35

所以我正在为自己创建一个在线个人资料，并且正在研究如何使目标网页尽可能具有吸引力。接触到 HTML5 Canvas，做了一些关于制作交互式背景的研究和实验，这就是结果(在 codepen 中)。

现在，我想在 Canvas 中间用动画前面的文字写下我的名字。

在递归循环中调用动画，并在调整页面大小或刷新时调用初始化函数。

问题是，我无法获取前面的文本，而且由于某些奇怪的原因，当页面调整大小时我的文本会缩小。

这是我的笔

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>

这是我想要实现的想法。 (移动背景前马修·威廉姆斯的文字)

http://findmatthew.com

最佳答案

如果我是你，我会跳过在 Canvas 中呈现文本并将一些 CSS 规则应用于 div 以使其显示在顶部。 CSS 方法 improves performance并且还提高了可访问性。使用屏幕阅读器的盲人将能够弄清楚 div 中的内容，但不支持阅读 canvas 中的文本。最重要的是，推理 HTML 和 CSS 比推理 canvas 元素中的文本呈现要容易得多。你会多久做一次？当您在一个月、六个月或一年后回来更改代码时，更改 HTML/CSS 将比重新考虑 Canvas 渲染逻辑更容易!

为此，请为 div wrapper 使用以下 CSS:

.wrapper{
    position: absolute;
    top: 0px;
    color: red;
    font-size: 60px;
    margin : 20px;
}

position: absolute 允许 div 覆盖 Canvas ，属性 top, bottom, left 和 right 允许您控制 div 与其父级边缘的偏移距离(在本例中为 wrapper是 body 的 child )。我调整了颜色和字体大小，只是为了让它明显有效。

这里是一个工作示例的链接:https://codepen.io/anon/pen/LqoroR

关于javascript - 我如何在 Canvas 动画上写文字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54806434/