Question

我正在尝试用帆布重现油漆api。我需要获得两个坐标来绘制一个矩形，但似乎JavaScript只保留一个坐标。

这是我的代码：

var x_1;
var y_1;
var x_2;
var y_2;
var tab_coord;

function coord(evt) {
x_1 = evt.clientX;
y_1 = evt.clientY;
console.log("coord x_1 :" + x_1 + "y :" + y_1);
tab_coord={'x_1': x_1, 'x_2':y_1};


canvas.addEventListener('click', second_coord);
}
function second_coord(evt) {
console.log(tab_coord);
x_2 = evt.clientX;
y_2 = evt.clientY;

console.log("coord x_2:" + x_2 + "y :" + y_2);
}

如果在console.log("coord x_1 :" + x_1 + "y :" + y_1)我有第一个坐标，JS不会将其保留在tab_coord中。因此，console.log(tab_coord)表示我想要的x_2和y_2以及x_1，y_1的坐标。

Answer 1

您不应该在每次点击时添加eventListener，顺便说一下，您还只需要一个点击处理程序来处理不同的操作。

检查一下：

创建画布全屏，定义未定义的x1和y1，在加载时向画布添加一个eventlistener，它根据shape值执行形状，shape包含各种类型的shapeFunctions。

要创建一个矩形，你需要将x1减去x2，将y1减去y2

如果使用双击功能，则不需要

x2，y2。

var C=document.createElement('canvas'),
    c=C.getContext('2d'),
    x1,
    y1,
    shape='rect';
    C.width=window.innerWidth;
    C.height=window.innerHeight;
    C.style.cssText='position:fixed;top:0;left:0;';
    document.body.appendChild(C);
    C.addEventListener('click',handler,false);

function handler(e){
 shapes[shape](e);
}

shapes={    
 rect:function(e){
  x1? // with this simple check you can't use 0 as it returns false.
  (c.rect(x1,y1,e.clientX-x1,e.clientY-y1),c.stroke(),x1=y1=false):
  (x1=e.clientX,y1=e.clientY);
 }
 //Add more shape functions here.Or fill whatever....
}

<强>样本

http://jsfiddle.net/yY8EX/

使用圈子进行演示

http://jsfiddle.net/yY8EX/2/

如果您不理解某事或有任何其他问题，请询问。

JavaScript如何获得不同的坐标clientX和clientY

1 个答案: