Блог

Главная - Вопросы по программированию - Простое рисование прямоугольника с помощью Electron и JavaScript не работает

Простое рисование прямоугольника с помощью Electron и JavaScript не работает

#javascript #electron

#javascript #electron

Вопрос:

Я пытаюсь очень просто нарисовать прямоугольник на холсте с помощью Electron, но ни один из кодов не выполняется после строки «var ctx = canvas.getContext(«2d»)». Я совершенно новичок в JS и Electron. Сначала я подумал, что, возможно, код JS выполнялся до того, как холст был отрисован, но я не думаю, что здесь дело в этом. Вот app.js:

 function initDraw(canvas) {
    var ctx = canvas.getContext("2d")
    ctx.beginPath();
    ctx.rect(20, 20, 150, 100);
    ctx.stroke();
}

и вот index.html:

 <!doctype html>
<html>
<head>
    <style>
    .aligncenter {
        text-align: center;
    }

    #canvas {
        width:2000px;
        height:2000px;
        border: 10px solid transparent;
    }
    .rectangle {
        border: 1px solid #FF0000;
        position: absolute;
    }
    </style>
</head>
<body>

    <div id="canvas"></div>
    <script src="app.js"></script>
    <script>
      initDraw(document.getElementById('canvas'));
    </script>

</body>
</html>

Я использую macOS и Electron. Я уверен, что решение очень простое, но любая помощь была бы высоко оценена.

Комментарии:

1. не могу сказать, загружается ли его app.js , но это должно быть <canvas id="canvas"></canvas> , а не div

2. @LawrenceCherone Спасибо! Я подозревал, что это что-то действительно простое.

Ответ №1:

элемент, содержащий идентификатор «canvas», является div. но это не должно быть div. Это должен быть холст.

 <canvas id="canvas"></canvas>