Я пытаюсь создать приложение для рисования с помощью javascript, но элемент canvas, в котором он должен выполняться, не отвечает. Что не так с моим кодом?

#javascript #html #canvas

#javascript #HTML #холст

Вопрос:

Предполагается, что это приложение для рисования на JavaScript на сайте. Пользователи должны иметь возможность просто загружать сайт и рисовать на холсте. Прямо сейчас canvas не отвечает, несмотря на отсутствие сообщений об ошибках… кто-нибудь видит что-то не так? Возможно, я просто слишком новичок в этом.

 // paint.js
(function () {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");

  //resizing
  //canvas.height = window.innerHeight;
  //canvas.width = window.innerWidth;

  //variables
  var painting = false;

  function startPosition(e) {
    painting = true;
    draw(e);
  }

  function endPosition() {
    painting = false;
    context.beginPath();
  }

  function draw(e) {
    if (!painting) return;
    context.lineWidth = 7;
    context.lineCap = "round";
    context.strokeStyle = "green";

    context.lineTo(e.clientX, e.clientY);
    context.stroke();
    context.beginPath();
    context.moveTo(e.clientX, e.clientY);
  }

  //EventListeners
  canvas.addEventListener("mousedown", startPosition);
  canvas.addEventListener("mouseup", endPosition);
  canvas.addEventListener("mousemove", draw);
})();

 @charset "UTF-8";
/* CSS Document */
body {
    text-wrap: wrap;
    text-align: center;
    background: #e0ebdd;
    font-family: helvetica;
}

.nav {
    width: 50%;
    padding: 15px;
    margin: auto;
    text-align: center;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
    font-size: 20px;
    color: black;
}

.nav a {
    transition: 0.4s;
}

.nav a:hover {
    color:#FFB52A;
    font-style: italic;
    padding: 10px;
    transition: 0.2s;
}

.footer {
    clear: both;
}

.info {
    margin: auto;
    width: 50%;
    align-content: center;
    text-align: center;
    text-size: 16px;
}

.wavingHand {
    float: left;
    position: relative;
    bottom: 100px;
    left: 100px;
    clear: right;
    width: 100px; 
    padding: 50px;
}

 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>draw-and-listen</title>
<link href="grove.css" rel="stylesheet" type="text/css">
</head>

<body>

<h1>draw and listen</h1>

<div class="nav">
    
        <a href="artists.html">artists</a>
        <a href="draw-and-listen.html">draw and listen</a>
        <a href="store.html">store</a>

</div>
    
<div>
  <canvas id="canvas" height="480" width="640" style="border:1px solid #000000; background-color: white;">Please update your browser.</canvas>
  <script src="paint.js"></script> 
</div>

<a class="aHome" href="index.html"><img src="img/planet-green.png" style="float:right;width:42px;height:42px;" alt="home planet"></a>

<div>

    <p style="clear: right;">© 2020</p>
    
</div>  
</body>
</html>

Как ни странно, когда я запускаю его здесь, он, кажется, работает (хотя мышь смещена …), Но когда я просто запускаю HTML в Google Chrome, canvas не отвечает.

1. Можете ли вы добавить фрагмент кода?

2. В вопросе должен быть код. На моем конце есть.

3. Разве вы этого не видите?

4. Я имел в виду, если вы можете добавить фрагмент кода, чтобы мы могли запустить код и увидеть результат.

5. Да, я вижу это, но я не могу его запустить.

Ответ №1:

На самом деле, ваш код работает, вы можете что-то записать в draw функцию. Проблема заключается в координации (X, Y). В вашем случае вы можете установить для размера окна просмотра canvas и размера элемента canvas одинаковое значение, чтобы обеспечить неправильное положение мыши.

 <canvas id="canvas" height="480" width="640" style="border:1px solid #000000; width: 640px; height:480px;"></canvas>