画布 fillRect 的 X 坐标错误答案

【问题标题】：Canvas fillRect has wrong X coordinate画布 fillRect 的 X 坐标错误
【发布时间】：2015-06-21 04:47:28
【问题描述】：

我正在尝试创建一个 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)});
              });

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

【问题讨论】：

标签： javascript jquery html canvas

【解决方案1】：

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

他们不是“event.x”

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

还有一件事您首先定义一个 var x 存储值的位置，在它下面的下一个你正在运行一个 for 循环，X 的值是 6，这就是为什么事情没有解决。

如果你在画布之前控制 x 的值，你会看到它总是打印 6。并且您正在运行 for 循环直到 6....因此每次鼠标移动都会出错 X。

【讨论】：