主页 / 问题 / 1029435
Accepted
OPTIMUS PRIME
Asked:2020-09-30 07:37:18 +0000 UTC2020-09-30 07:37:18 +0000 UTC

画布颜色选择器

  • 772

将光标悬停时，像素的颜色应显示在相邻块中。
问题：画布的高度是 300px，当悬停在上半部分时，颜色会显示为整个画布。在下半部分，它到处都是黑色的。
如果你在最后写它可以正常工作let y = (e.pageY - coor.y)/2;为什么会这样？

(JsFiddle)

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let grd = ctx.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, '#f00');
grd.addColorStop(0.286, '#ff0');
grd.addColorStop(0.429, '#0f0');
grd.addColorStop(0.521, '#0ff');
grd.addColorStop(0.714, '#00f');
grd.addColorStop(0.857, '#f0f');
grd.addColorStop(1, '#f00');

let grd2 = ctx.createLinearGradient(150, 0, 150, 300);
grd2.addColorStop(0, '#0000');
grd2.addColorStop(0.1, '#0000');
grd2.addColorStop(0.5, '#aaaf');
grd2.addColorStop(1, '#aaaf');

ctx.fillStyle = grd;
ctx.fillRect(0, 0, 300, 300);
ctx.fillStyle = grd2;
ctx.fillRect(0, 0, 300, 300);

let rect = canvas.getBoundingClientRect();
let coor = {
  x: rect.left,
  y: rect.top
}

let block = document.getElementById('block');
canvas.addEventListener('mousemove', function(e){
  let x = e.pageX - coor.x;
  let y = e.pageY - coor.y; // <=====
  let d = ctx.getImageData(x, y, 1, 1).data;
  let rgb = `RGB(${d[0]},${d[1]},${d[2]})`;
  block.style.backgroundColor = rgb;
});
#canvas {
  width: 300px;
  height: 300px;
  margin-left: 60px;
}
#block {
  position: absolute;
  top: 0; left: 0;
  width: 50px;
  height: 50px;
  background-color: red;
}
<canvas id="canvas"></canvas>
<div id="block"></div>

javascript

1 个回答

  1. Best Answer

    你用 css 拉伸了画布，而它的实际大小默认保持不变（300x150）

    您必须在 js 代码或 html 属性中显式设置画布的大小

    let ctx = canvas.getContext('2d');

let grd = ctx.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, '#f00');
grd.addColorStop(0.286, '#ff0');
grd.addColorStop(0.429, '#0f0');
grd.addColorStop(0.521, '#0ff');
grd.addColorStop(0.714, '#00f');
grd.addColorStop(0.857, '#f0f');
grd.addColorStop(1, '#f00');

let grd2 = ctx.createLinearGradient(300, 0, 300, 600);
grd2.addColorStop(0, '#0000');
grd2.addColorStop(0.1, '#0000');
grd2.addColorStop(0.5, '#aaaf');
grd2.addColorStop(1, '#aaaf');

ctx.fillStyle = grd;
ctx.fillRect(0, 0, 300, 300);
ctx.fillStyle = grd2;
ctx.fillRect(0, 0, 300, 300);

canvas.addEventListener('mousemove', function(e){
  let d = ctx.getImageData(e.layerX, e.layerY, 1, 1).data;
  let rgb = `RGB(${d[0]},${d[1]},${d[2]})`;
  block.style.backgroundColor = rgb;
});
    #canvas {
  margin-left: 60px;
}
#block {
  position: absolute;
  top: 0; left: 0;
  width: 50px;
  height: 50px;
  background-color: red;
}
    <canvas id="canvas" width=300  height=300 ></canvas>
<div id="block"></div>

    • 4

相关问题