如何控制画布的 RGB，使渐变的红色和绿色部分是鼠标位置除以二的位置？答案

【问题标题】：How can I control the RGB of my canvas so that the Red and Green part of the gradient is the position of my mouse position divided by two?如何控制画布的 RGB，使渐变的红色和绿色部分是鼠标位置除以二的位置？
【发布时间】：2021-11-20 23:41:28
【问题描述】：

我的硬件指令特别要求：RGB，其中红色为 0，绿色为 x 坐标除以 2，蓝色为 y 坐标除以 2。到目前为止，我的大画布的颜色由 addColorStop 函数控制，但我不确定如何改变颜色以及它应该如何改变。感谢任何帮助，因为我已经坚持了 2 天。谢谢。

<!DOCTYPE html>
<html>
<body>
<canvas id="big" onclick="myFiller(event);"; width="512" height="512"style="border: solid #000000;"></canvas>
<canvas id="small" width="100" height="100" style="background-color: #FF0000"></canvas>
<p id="para"></p>
<script>
// add eventListener
  var c = document.getElementById("big");
  var ctx = c.getContext("2d");
  var rgbCanvas = ctx.createLinearGradient(c.width, c.height, 120,120);
  rgbCanvas.addColorStop(0, "red");
  rgbCanvas.addColorStop(0.5 ,"green");
  rgbCanvas.addColorStop(1, "blue");
  ctx.fillStyle = rgbCanvas;
  ctx.fillRect(0,0, 512, 512);

  var s = document.getElementById("small");
  var stx = s.getContext("2d");

  function myFiller(event) {
    console.log("running");
      // document.getElementById("big").innerHTML = style
    //  console.log(cData);
        var x = event.offsetX;
        var y = event.offsetY;
        var pixelContainer = ctx.getImageData(x, y, 1, 1).data; //pixelContainer grabs the context of "big" canvas but only one pixel worth
        console.log(pixelContainer); //just to see if pixelContainer is working
        console.log(pixelContainer[0],pixelContainer[1],pixelContainer[2],pixelContainer[3])
        //understand what this is later
        document.getElementById("big").innerHTML = "(" + pixelContainer[0] + " " + ")";
        var red = (pixelContainer[0]).toString(16);
        var green = (pixelContainer[1]).toString(16);
        var blue = (pixelContainer[2]).toString(16);
        document.getElementById("para").innerHTML = "#"+ red+green+blue;

  }
</script>

</body>

</html>

【问题讨论】：

请检查您的标签，javascript != java

标签： javascript html canvas

【解决方案1】：

这是在mousemove上更改画布背景颜色的简单方法

里夫：mousemove MDN

  document.querySelector('canvas').addEventListener('mousemove', evt => 
    evt.target.style.backgroundColor = `rgb(0, ${evt.offsetX / 2}, ${evt.offsetY / 2})`
  )

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <canvas width="512" height="512"></canvas>
  </body>
</html>

【讨论】：