Question

因此，我正在为自己创建在线个人资料，并且我正在研究如何使目标网页尽可能地吸引人。来到HTML5 Canvas上，进行了一些研究和实验，以制作交互式背景，这就是结果（在Codepen中）。

现在，我想在画布的中间写上我的名字，并在动画的前面加上文字。

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

问题是，我无法将文本放在前面，并且由于某种奇怪的原因，在调整页面大小时，我的文本缩小了。

这是我的笔

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

Answer 1

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

为此，请将以下CSS用于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

如何在画布动画上写文本

1 个答案: