如何使用 Javascript 在 Canvas 中的位置单击？

Question

我想点击 Canvas 元素的 id 是myCanvas width: 500, height: 200。

在Javascript中，有什么方法可以做到这一点？

使用Page Ruler - Chrome 扩展来获取位置包括参数x，y。

我尝试了代码：

function relMouseCoords(event){
    var totalOffsetX = 220;
    var totalOffsetY = 100;
    var canvasX = 500;
    var canvasY = 200;
    var currentElement = this;

    do{
        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
    }
    while(currentElement = currentElement.offsetParent)

    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;
    console.log(canvasX, convastY);
    return {x:canvasX, y:canvasY}
}
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

Answer 1

trigger可以通过JS点击任意元素。

使用 jQuery：

x_coord = 1;
y_coord = 1;

var e = jQuery.Event( "mousedown", { pageX: x_coord, pageY: y_coord } );
$('#myCanvas').trigger(e);

// execute more code
x_coord = 255;
y_coord = 255;

var e = jQuery.Event( "mouseup", { pageX: x_coord, pageY: y_coord } );
$('#myCanvas').trigger(e);