Как нарисовать точку на Canvas?

Пользователь

от caterina , в категории: Другие , год назад

Как нарисовать точку на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от vladimir , год назад

@caterina 

Для того, чтобы нарисовать точку на Canvas, нужно использовать метод fillRect(), передав в него координаты точки и ее размеры. Пример:

1
2
3
4
5
6
7
8
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// настраиваем цвет точки
ctx.fillStyle = "#000000";

// нарисовать точку в координатах (50, 50) размером 2px
ctx.fillRect(50, 50, 2, 2);


В этом примере, мы создаем Canvas элемент с id "myCanvas", получаем его контекст, настраиваем цвет точки и рисуем ее в координатах (50, 50) с размерами 2px x 2px.

Пользователь

от eudora , 25 дней назад

@caterina 

Альтернативный способ нарисовать точку на Canvas — использовать метод arc() для создания круга радиусом 0. Пример:

1
2
3
4
5
6
7
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(50, 50, 0, 0, 2 * Math.PI);
ctx.fillStyle = "#000000";
ctx.fill();


В этом примере мы используем метод arc() для создания круга в координатах (50, 50) с нулевым радиусом, что фактически является точкой. После чего заполняем точку указанным цветом с помощью fill().