@formasters777

Canvas линия и способ её описания?

Каким образом правильно описать линию canvas, что бы можно было обратиться к ней после создания?
Например, узнать её размер, переместить, удалить, изменить размер.
Как понимаю это должен быть просто объект с свойствами, которые описал выше?
А после её создания, как к ней обращаться? Она будет экземпляром объекта или объектом?
Линия будет объектом canvas или объектом javascript?
Если линию загрузить в localStorage, как потом обрабатывать это для вывода на экран, это будет что-то типа цикла для каждого объекта в файле, и итерациями так выводить?
Или для этого уже нужны не просто функции, а какие-нибудь методы-фабрики и паттерны?
Например добавить var line1 = drawLine(ctx, 10, 10, 100, 100, 'tomato', 3);

<body>
   <canvas id="canvas"> </canvas>
    <script>
      function drawLine(ctx, x1, y1, x2,y2, stroke = 'black', width = 3) {
        // start a new path
        ctx.beginPath();

        // place the cursor from the point the line should be started 
        ctx.moveTo(x1, y1);

        // draw a line from current cursor position to the provided x,y coordinate
        ctx.lineTo(x2, y2);

        // set strokecolor
        ctx.strokeStyle = stroke;

        // set lineWidht 
        ctx.lineWidth = width;

        // add stroke to the line 
        ctx.stroke();
      }
      let canvas = document.getElementById('canvas'),
          ctx = canvas.getContext('2d');
      drawLine(ctx, 10, 10, 100, 100, 'tomato', 3);
    </script>
 </body>
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
Canvas – это растр. Нарисованная линия ничем не будет, кроме набора пикселей на холсте.
Вы можете сохранять параметры линии, по которым сможете нарисовать ее заново. Но вы не можете сохранить саму линию.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы