在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>
<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 用来突出显示画布：
canvas {
border: 5px solid black;
}
谢谢您的帮助。
慕森卡1回答
-
FFIVE
只需将canvas和contextCanvas定义为类的属性即可。
随时随地看视频慕课网APP
相关分类
Html5