Добавление маркеров в CanvasRenderingContext2D в javascript

Я использую d3.js и объект CanvasRenderingContext2D, описанный здесь. Я рисую кучу линий на холсте, используя следующие команды (внутри цикла)

g.beginPath();
g.moveTo(nx, ny);
g.lineTo(nx+= dx*scale, ny += dy*scale);
g.stroke();

У меня есть проблемы: я хочу добавить стрелки (или другой маркер) в конец этих строк - и мне не ясно, как (или если) я могу это сделать, если путь создается с использованием этого подхода. Я вижу, что это можно сделать, если я создам путь напрямую, как показано в этом пример, но предпочел бы использовать методы Context2d, указанные выше, если это возможно. Как добавить маркеры в конец каждого пути, созданного с помощью Context2D?

javascript d3.js canvas vector marker

09.09.2018 17:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

189

Ответы 1

Вот один из способов добавить маркер к вашим линиям.

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

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
context.strokeStyle = "#000";
context.fillStyle = 'red';
context.lineWidth = 1;


function drawLine(data) {
  context.beginPath();
  context.moveTo(data[0].x, data[0].y);
  context.lineTo(data[1].x, data[1].y);
  context.stroke();
  context.beginPath();
  context.arc(data[1].x, data[1].y, 5, 0, Math.PI * 2);
  context.fill();
}

for (var i = 1; i < 5; i++) {
  drawLine([{ x: 0, y: 10 + i*10 }, { x: 200, y: 10 + i*30 }]);
}

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

09.09.2018 19:43

Другие вопросы по теме

D3 принудительно направленный граф, фокус на узле двойной щелчок

Масштабировать ось d3 x (время) до нуля

Как сделать в C3.js диаграммы с несколькими датчиками?

Как показать экспоненциальный индекс как строку в d3?

Разделите строку в свойстве объекта и создайте новый набор данных

Распределение n-х кругов по оптимальной окружности

Загрузка в CSV-файл как карту (D3 и JavaScript)

D3 принудительно-ориентированный граф, добавляющий новые узлы, приводит к тому, что x и y равны NaN

Обновить шаблон, выйти и удалить

Диаграмма рассеяния D3.js с символами

Добавление маркеров в CanvasRenderingContext2D в javascript

Ответы 1

Другие вопросы по теме

Похожие вопросы