我正在嘗試創建一個程序，用戶填寫字段并顯示“帖子”（上面寫有文字的畫布）。到目前為止，我已經成功地創建了畫布，但用文本填充它是問題。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
提交
取消