我正在尝试创建一个程序，用户填写字段并显示“帖子”（上面写有文字的画布）。到目前为止，我已经成功地创建了画布，但用文本填充它是问题。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;}谢谢您的帮助。
添加回答
举报
0/150
提交
取消