Как нарисовать пиксель на Canvas?

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

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

Как нарисовать пиксель на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от karen.wisozk , год назад

@roxanne.hauck 

Для рисования пикселя на Canvas нужно использовать метод fillRect():

1
2
3
4
5
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "black"; // цвет пикселя, может быть любым
ctx.fillRect(10, 10, 1, 1); // координаты x, y и размеры ширины и высоты пикселя


Этот код создаст черный пиксель размером 1 пиксель и нарисует его в точке (10,10) на холсте Canvas с id "canvas".

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

от buster , 5 месяцев назад

@roxanne.hauck 

Для того чтобы создать функцию, которая будет рисовать пиксели на холсте, вы можете использовать следующий код:

1
2
3
4
5
6
7
function drawPixel(x, y, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, 1, 1);
}

// Пример использования функции
drawPixel(10, 10, "black"); // рисуем черный пиксель в точке (10,10)


Теперь, когда у вас есть функция drawPixel, вы можете вызывать её с разными координатами и цветами, чтобы нарисовать пиксели на холсте.