Блог

Главная - Вопросы по программированию - Как нарисовать замкнутую область, состоящую из отдельных линий на холсте js?

Как нарисовать замкнутую область, состоящую из отдельных линий на холсте js?

#javascript #html5-canvas

Вопрос:

Я использую холст и рисую закрытую область и хочу, чтобы область была заполнена каким-то цветом. Вот как я это делаю. Я рисую замкнутую область линиями

  1. Я рисую линию (1)
  2. Следующая строка (2) начинается с конца предыдущей
  3. Последняя строка (3) начинается с конца строки (2) и заканчивается в начале строки (1)

Так что в результате я закрыл область и хочу заполнить ее каким-то цветом

Вот фрагмент кода, который я использовал:

 context.fillStyle = '#8ED6FF';
context.fill();

Но это не работает. Вот код, который я использую для выполнения этой задачи.

 <html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="978" height="900"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      // begin custom shape
      context.beginPath();
      // line (1)
      context.moveTo(10, 10);
      context.lineTo(190, 190);
      // line (2)
      context.moveTo(190, 190);
      context.lineTo(200, 280);
      // line (3)
      context.moveTo(200, 280);
      context.lineTo(10, 10);
      // here I try fill the area by color
      context.fillStyle = '#8ED6FF';
      context.fill();
      
      context.stroke();
    </script>
  </body>
</html>

Ответ №1:

Я нашел решение.

 <html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="978" height="900"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      // begin custom shape
      context.beginPath();
      context.moveTo(70, 70);
      context.lineTo(290, 290);
      context.lineTo(300, 380);
      context.closePath()
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.stroke();
    </script>
  </body>
</html>
Метки: ,