我正在嘗試創(chuàng)建一個(gè)程序，用戶填寫字段并顯示“帖子”（上面寫有文字的畫布）。到目前為止，我已經(jīng)成功地創(chuàng)建了畫布，但用文本填充它是問(wèn)題。ES6 類中有一個(gè)單獨(dú)的函數(shù)將文本添加到畫布。我還有一個(gè)功能可以創(chuàng)建一個(gè)新的“帖子”并在其上顯示文本。我正在使用該函數(shù)來(lái)測(cè)試程序，但是文本被覆蓋在創(chuàng)建的第一個(gè)畫布上的其他文本之上。這是我的 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 用來(lái)突出顯示畫布：canvas { border: 5px solid black;}謝謝您的幫助。
- 1 回答
- 0 關(guān)注
- 188 瀏覽
添加回答
舉報(bào)
0/150
提交
取消