如何解决我试图获取鼠标在画布上单击的位置,并用黑色填充该像素这是我当前的代码:我该如何纠正?
所以这是代码,我已记下了它来记录鼠标的位置并放下它。我现在需要做的就是在鼠标点击位置上填充矩形。有人可以告诉我我该如何解决吗?
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);
}
}
解决方法
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);
}
}
定义比例时,需要将坐标除以比例以匹配位置:)
您还可以在此处查看:https://jsfiddle.net/pt0vxrda/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。