如何從具有背景顏色漸變的畫布中獲得像素顏色？

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

線性漸變是畫布的CSS屬性，它不會繪制在您通過渲染上下文操作的基礎位圖上。 該位圖默認情況下為空白，只能以編程方式進行修改。

您需要做的是在JS代碼中繪制漸變，然后可以提取顏色數據。 不幸的是，它比CSS要復雜得多，但是可以做到。 我舉了一個例子，作為概念的證明。

在MDN上閱讀createLinearGradient ：

https://developer.mozilla.org/zh-CN/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 ：

 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>