画布填充矩形有错误的 X 坐标

Canvas fillRect has wrong X coordinate

本文关键字：坐标 有错误 填充矩形      更新时间：2023-09-26

我正在尝试创建一个javascript函数，该函数将为光标下方的画布像素着色。当它运行时，彩色像素显示在浏览器的左边缘，尽管它们位于正确的垂直位置。以下是我的函数：

function writecolor(event) {
    var canvas = document.getElementById("colcan");
    var ctx = canvas.getContext("2d");
    var stylestr;
    var permuda = "0123456789ABCDEF";
    var os = $("#colcan").offset();
    var x= event.X-os.left;
    var y= event.clientY-os.top;
    console.log(x);
    var str = "#";
    for (x=0; x<6;x++) {
        str += permuda.charAt(Math.floor(Math.random()*16));
    }
    ctx.fillStyle = str;
    ctx.fillRect(x,y,1,1);
}
function setdim() {
    var canv = document.getElementById("colcan");
    canv.height=$(window).height();
    canv.width=$(window).width();
}
$(document).ready(function() {
             setdim();
              $(window).on("resize", function() {setdim()});
              $("#colcan").on("mousemove", function(event) { writecolor(event)});
              });

我可以从控制台上看出鼠标移动时正在读取正确的 X 坐标。我一直无法弄清楚为什么像素没有出现在正确的水平位置。这是一个jsfiddle：https://jsfiddle.net/xt87kb2q/

在控制台中，我将 x 坐标设置为 NaN

没有"event.x"

你需要做"event.clientX"来获取X坐标

还有一件事您首先定义存储值的 var x，接下来，您正在运行一个 for 循环，X 的值是 6，这就是事情没有解决的原因。

如果在绘制画布之前控制台 x 的值，您可以看到它始终在打印 6。并且您正在运行一个 for 循环直到 6....因此，对于每个鼠标移动，您都会得到错误的 X。

相关文章：