JS创建画布绘制文字时，创建更多时文字被覆盖

Question

我正在尝试创建一个程序，用户在其中填写字段并显示 "post"（上面写有文本的 canvas）。

到目前为止，我已经成功地创建了 canvas，但是用文本填充它是个问题。

在 ES6 Class 中有一个单独的函数可以将文本添加到 canvas。

我还有一个函数可以创建一个新的 "Post" 并在上面显示文本。

我正在使用该功能来测试程序，但是在创建第一个 canvas 时文本被覆盖在其他文本之上。

这是我的 JavaScript:

var body = document.getElementsByTagName("body")[0];

class Post {
    constructor(height, width, user) {
        this.height = height;
        this.width = width;
        this.user = user;
        let canvas = document.createElement('canvas');
        canvas.height = this.height;
        canvas.width = this.width;
        body.appendChild(canvas);
    }
    addText(text, color) {
        let canvas = document.getElementById(this.id);
        let contextCanvas = canvas.getContext('2d');
        contextCanvas.fillStyle = color;
        contextCanvas.fillText(text + " by " + this.user, 5, 30);
    }
    addBreak() {
        let br = document.createElement("br");
        body.appendChild(br);
    }
};

var createBox = async (textP, userP) => {
    let text = textP;
    let user = userP;
    let textColor = "black";

    let boxCreate = new Post(200, 200, user);
    boxCreate.addText(text, textColor);
    boxCreate.addBreak();
}

//drawPosts();

createBox("hi", "i am one.");
createBox("hello", "i am two.");
createBox("hey", "i am three.");

我的HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <script src="script.js">
        </script>
    </body>
</html>

我的 CSS 突出显示 canvases:

canvas  {
    border: 5px solid black;
}

感谢您的帮助。

Answer 1

正如@Teemu 所说，只需将 canvas 和 contextCanvas 定义为 class.

的属性

JS创建画布绘制文字时，创建更多时文字被覆盖

When creating canvases in JS and drawing text, text is overwitten when creating more

html

javascript

css

html5-canvas

es6-class