所以这是代码，我让它记录鼠标位置并将其放置。我现在需要它做的就是在鼠标点击的位置上填充矩形。有人能告诉我怎么解决这个问题吗？
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);
}
}
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/