画上画布说明

Question

我想在画布上绘画，我看到了一个例子，但我不明白：x:event.clientX - rect.left, 在这部分代码中：

getMousePos : function(event) {
        rect = this.canvas.getBoundingClientRect();
        return{
            x:event.clientX - rect.left,
            y:event.clientY - rect.top
        };
    },

-是什么意思？抱歉，这是一个初学者的问题：D

Answer 1

这是一个减法，就像5 - 3 = 2

之所以减去，是因为属性clientX和clientY表示整个文档中事件的坐标X和Y。

变量rect包含画布在文档中的位置，因此event.clientX - rect.left为您提供相对于画布的水平位置（以像素为单位）试图画画。

Answer 2

这是一个简单的减号，只是两个坐标之间的数学运算：

event.clientX - rect.left