Question

我有lookUpTitle = navGroup => { const title =[]; for (let item of navGroup) { if (item.route && item.route.toLowerCase() === '/reports/title3') { console.log(item.title) return item.title; } else { if (item.children) { this.lookUpTitle(item.children); } else { console.log(item.title); return item.title; } } } };元素，背景色线性渐变。我希望得到点击的像素颜色，但每次我得到canvas。然后我试图获得第一个像素的颜色，但没有运气..该代码有什么问题？

＆＃13;

[0, 0, 0, 0]

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

Answer 1

线性渐变是画布的CSS属性，它不会在您通过渲染上下文操作的底层位图上绘制。默认情况下，该位图为空白，只能通过编程方式进行修改。

您需要做的是在JS代码中绘制渐变，然后您可以提取颜色数据。不幸的是，它比CSS更挑剔，但它可以做到。我把一个例子拼凑在一起，就像一个概念证明。

在MDN上阅读createLinearGradient：

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修改画布的大小，您在位图上绘制的图像将被拉伸以适应这些尺寸，这很少是您想要的。

Answer 2

除了上一个答案，要获取点击像素的颜色，您需要获得鼠标的x和y：

＆＃13;

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)
}

＆＃13;

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

＆＃13;

如何从背景颜色渐变的画布获取像素颜色？

2 个答案: