Как получить цвет пикселя на холсте с градиентом цвета фона?

Question

У меня есть canvas элемент с линейным градиентом цвета фона.Я хочу получить цвет пикселя, но каждый раз я получаю [0, 0, 0, 0].Затем я попытался получить цвет первого пикселя, но не повезло. Что не так с этим кодом?

const canvas = document.getElementById("example");

canvas.onclick = function(event) {
	const ctx = event.target.getContext("2d").getImageData(1, 1, 1, 1).data;
	console.log(ctx)
}

#example {
    background: linear-gradient(54deg, rgba(179, 63, 19, 1) 0%, rgba(160, 79, 44, 1) 8%, rgba(33, 238, 20, 1) 42%, rgba(35, 182, 208, 1) 61%, rgba(0, 212, 255, 1) 76%, rgba(0, 212, 255, 1) 84%, rgba(0, 212, 255, 1) 96%);
	width: 500px;
	height: 60px;
}

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

Answer 1

в дополнение к предыдущему ответу, чтобы получить цвет кликаемого пикселя, вам нужно получить x и y мыши:

var canvas = document.querySelector('#example')
var ctx = canvas.getContext('2d');

var gradient = ctx.createLinearGradient(0, 0, 300, -300);
gradient.addColorStop(0, 'rgba(179, 63, 19, 1)');
gradient.addColorStop(8 / 100, 'rgba(160, 79, 44, 1)');
gradient.addColorStop(42 / 100, 'rgba(33, 238, 20, 1)');
gradient.addColorStop(61 / 100, 'rgba(35, 182, 208, 1)');
gradient.addColorStop(76 / 100, 'rgba(0, 212, 255, 1)');
gradient.addColorStop(84 / 100, 'rgba(0, 212, 255, 1)');
gradient.addColorStop(96 / 100, 'rgba(0, 212, 255, 1)');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 60);

let pixel = ctx.getImageData(1, 1, 1, 1).data;

canvas.onclick = function(event) {
  var x = event.clientX;
  var y = event.clientY;
  var colors = ctx.getImageData(x, y, 1, 1).data;
  console.log(colors)
}

<canvas id="example" width="500" height="60"></canvas>

Answer 2

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

Вам нужно нарисовать градиент в своем коде JS, после чего вы можете извлечь данные о цвете.К сожалению, это намного более привередливый, чем CSS, но это можно сделать.Я собрал пример, просто как подтверждение концепции.

Читайте createLinearGradient в MDN:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient

var ctx = document.querySelector('#example').getContext('2d');

var gradient = ctx.createLinearGradient(0, 0, 50, 60);
gradient.addColorStop(0, 'rgba(179, 63, 19, 1)');
gradient.addColorStop(8/100, 'rgba(160, 79, 44, 1)');
gradient.addColorStop(42/100, 'rgba(33, 238, 20, 1)');
gradient.addColorStop(61/100, 'rgba(35, 182, 208, 1)');
gradient.addColorStop(76/100, 'rgba(0, 212, 255, 1)');
gradient.addColorStop(84/100, 'rgba(0, 212, 255, 1)');
gradient.addColorStop(96/100, 'rgba(0, 212, 255, 1)');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 60);

let pixel = ctx.getImageData(1, 1, 1, 1).data;
console.log(pixel);

<canvas id="example" width="500" height="60"></canvas>

Внимание: Обратите внимание, что размер холста задается в атрибутах width и height элемента, ине в CSS.Это потому, что, как я уже сказал, есть разница между элементом <canvas> и его базовым растровым изображением.Атрибуты позволяют вам указать размер растрового изображения, и по умолчанию, насколько велик будет ваш холст.Если вы измените размер холста с помощью CSS, изображение, которое вы рисуете на растровом изображении, будет растянуто, чтобы соответствовать этим размерам, а это редко то, что вам нужно.