在JS中创建画布并绘制文本时，创建更多时文本会被覆盖

我正在尝试创建一个程序，用户填写字段并显示“帖子”（上面写有文字的画布）。

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

ES6 类中有一个单独的函数将文本添加到画布。

我还有一个功能可以创建一个新的“帖子”并在其上显示文本。

我正在使用该函数来测试程序，但是文本被覆盖在创建的第一个画布上的其他文本之上。

这是我的 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>

<head>

<title>Document</title>

</head>

<body>

</script>

</body>

</html>

我的 CSS 用来突出显示画布：

canvas {

border: 5px solid black;

}

谢谢您的帮助。

慕森卡

浏览 107回答 1

在JS中创建画布并绘制文本时，创建更多时文本会被覆盖

1回答