При создании холстов в JS и рисовании текста, текст перезаписывается при создании - PullRequest
Новая
       22

При создании холстов в JS и рисовании текста, текст перезаписывается при создании

0 голосов
/ 21 апреля 2020

Я пытаюсь создать программу, в которой пользователь заполняет поля и отображается «сообщение» (холст с текстом, написанным на нем).

До сих пор мне удалось создать холст, но заполнение его текстом - проблема.

В классе 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 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  {
    border: 5px solid black;
}

Спасибо за помощь.

1 Ответ

0 голосов
/ 24 апреля 2020

Как сказал @Teemu, просто определите canvas и contextCanvas как свойства класса.

...