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

How to click at position in Canvas using Javascript?

本文关键字：位置 单击 Canvas 何使用 Javascript      更新时间：2023-09-26

我想点击Canvas元素，id为myCanvas，宽度：500，高度：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;

通过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);
相关文章：