Question

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

Answer 1

在控制台中我得到x坐标为NaN

他们不是“event.x”

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

还有一件事你是第一个定义存储值的var x，在它下面你正在运行一个for循环，X的值是6，这就是事情没有成功的原因。

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

Canvas fillRect有错误的X坐标

1 个答案: