我正在尝试创建一个程序，用户填写字段并显示“帖子”(上面写有文字的 Canvas )。
到目前为止，我已经成功创建了 Canvas ，但用文本填充它是问题。
ES6 类中有一个单独的函数可以将文本添加到 Canvas 。
我还有一个函数可以创建一个新的“帖子”并在其上显示文本。
我正在使用该函数来测试程序，但是文本被覆盖在创建的第一个 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 来突出显示 Canvas :
canvas {
border: 5px solid black;
}
感谢您的帮助。
最佳答案
正如@Teemu所说，只需将canvas和contextCanvas定义为类的属性即可。
关于javascript - 在JS中创建 Canvas 并绘制文本时，创建更多 Canvas 时文本会被覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61347475/