javascript - 如何在画布动画上写文字

问题描述

所以我正在为自己制作一个在线个人资料，并且我正在研究如何使登录页面尽可能有吸引力。遇到了 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>

这是我想要实现的目标。（Mathew williams 的文字在移动的背景前）

http://findmatthew.com

标签： javascripthtmlhtml5-canvas

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

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

javascript - 如何在画布动画上写文字

问题描述

解决方案

推荐阅读