Javascript 如何使用画布html5将鼠标指针置于fillRect（）的中心

我正在使用画布处理这个应用程序，正如您在画布上移动鼠标时所看到的，指针后面有一个黑色矩形，指针位于该矩形的左上角。我想实现的是将指针放在矩形的中心，这是我的代码

HTML

<section id="main">
    <canvas id="canvas" width="600" height="400" style="border: 1px solid #aaa;"></canvas>
</section>

---

提前谢谢。

试试这个，我只是把-50放在xPos和YPO上，让它成为中心。因为您在

fillRect（）

上设置的尺寸是100 x 100

function animate(ev) {
    canvas.clearRect(0,0,600,400);
    var xPos = ev.clientX;
    var yPos = ev.clientY;

    canvas.fillRect(xPos-50, yPos-50, 100, 100);
}

function animate(ev) {
    canvas.clearRect(0,0,600,400);
    var xPos = ev.clientX;
    var yPos = ev.clientY;

    canvas.fillRect(xPos-50, yPos-50, 100, 100);
}