尝试创建一个小颜色选择器，为什么当我在 css 中使用 flex 显示时 context.getImageData() 只返回零？

Question

我在 javascript、

中创建了一个渐变

var colorCanvas = document.getElementById('color_canvas');
var ColorCtx = colorCanvas .getContext('2d');

var color = 'rgba(0,0,255,1)';
    let gradientH = ColorCtx .createLinearGradient(0, 0, ColorCtx.canvas.width, 0);
    gradientH.addColorStop(0, '#fff');
    gradientH.addColorStop(1, color);
    ColorCtx .fillStyle = gradientH;
    ColorCtx .fillRect(0, 0, ColorCtx.canvas.width, ColorCtx.canvas.height);

    let gradientV = ColorCtx .createLinearGradient(0, 0, 0, 300);
    gradientV.addColorStop(0, 'rgba(0,0,0,0)');
    gradientV.addColorStop(1, '#000');
    ColorCtx .fillStyle = gradientV;
    ColorCtx .fillRect(0, 0, ColorCtx.canvas.width, 
    ColorCtx .canvas.height);

上面创建了一个渐变。

colorCanvas.addEventListener('click',function(event){
    let x = event.clientX; 
    let y = event.clientY; 
    pixel = ColorCtx.getImageData(x,y,1,1);   // Read pixel Color
    let rgb = `rgba(${pixel.data[0]},${pixel.data[1]},${pixel.data[2]},${pixel.data[3]})`;
    console.log(rgb);
    document.getElementById('pick').style = 'background-color: ' + rgb;
    document.querySelector('.picked-color').style = 'background-color: ' + rgb;

});

事件侦听器假设从鼠标位置选择一种颜色并将其作为两个 div 的背景颜色

document.getElementById('pick').style = 'background-color: ' + rgb;
document.querySelector('.picked-color').style = 'background-color: ' + rgb;

但是 pixel = ColorCtx.getImageData(x,y,1,1); 只有 returns 一个零数组

Answer 1

我自己想通了，

let rect = event.target.getBoundingClientRect();
    let x = event.clientX - rect.left; // x position within the element.
    let y = event.clientY - rect.top; // y position within the element

我想我试图获取鼠标位置但不在预期元素内，这就是颜色选择器无法工作的原因，包括上面的代码，它按我的预期工作。

尝试创建一个小颜色选择器，为什么当我在 css 中使用 flex 显示时 context.getImageData() 只返回零？

trying to create a little color picker, why is context.getImageData() returning only zeros when i use flex display in css?

javascript

getimagedata