javascript - 我试图获得鼠标在画布上单击的位置并用黑色填充该像素。这是我当前的代码：我该如何纠正它？

Question

所以这里是代码，我得到它来记录鼠标位置并放置它。我现在需要做的就是在鼠标点击的位置填充矩形。有人可以告诉我如何解决这个问题吗？

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const scale = 8;
const width = 785;
const height = 585;
context.fillStyle = "black";
canvas.width = width;
canvas.height = height;

context.scale(scale, scale);
context.fillRect(50, 50, 1, 1);

canvas.addEventListener("mousedown", fillc, false);

function fillc(event) {
  let canvasElem = document.querySelector("canvas");

  canvasElem.addEventListener("mousedown", getMousePosition(canvas, event));

  function getMousePosition(canvas, event) {
    context.fillStyle = "black";
    let rect = canvas.getBoundingClientRect();
    let x = Math.floor(event.clientX - rect.left);
    let y = Math.floor(event.clientY - rect.top);
    console.log("Coordinate x: " + x, "Coordinate y: " + y);
    console.log("ok");
    context.fillRect(x, y, 1, 1);
  }
}

Answer 1

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const scale = 8;
const width = 785;
const height = 585;
context.fillStyle = "black";
canvas.width = width;
canvas.height = height;

context.scale(scale, scale);
context.fillRect(50, 50, 1, 1);

canvas.addEventListener("mousedown", fillc, false);

function fillc(event) {
  let canvasElem = document.querySelector("canvas");

  canvasElem.addEventListener("mousedown", getMousePosition(canvas, event));

  function getMousePosition(canvas, event) {
    context.fillStyle = "black";
    let rect = canvas.getBoundingClientRect();
    let x = Math.floor(event.clientX - rect.left) / scale;
    let y = Math.floor(event.clientY - rect.top) / scale;
    console.log("Coordinate x: " + x, "Coordinate y: " + y);
    console.log("ok");
    context.fillRect(x, y, 1, 1);
  }
}

当您定义一个比例时，您需要将坐标除以比例以匹配您的位置:)

你也可以在这里查看：https ://jsfiddle.net/pt0vxrda/