Question

我正在使用canvas jsfiddle处理这个应用程序，你可以看到当你在画布上移动鼠标时，指针后面有一个黑色矩形，指针位于该矩形的左上角。我想要实现的只是将指针置于该矩形的中心，这是我的代码

HTML

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

的JavaScript

function firstMethod() {
    var cv = document.getElementById('canvas');

    canvas = cv.getContext('2d');    

    window.addEventListener("mousemove", animate, false);   
}

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

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

window.addEventListener("load", firstMethod, false);

提前感谢。

Answer 1

尝试这个，我只是将-50放到xPos和yPos上以使其成为中心。因为您在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);
}

demo

如何使用canvas html5将鼠标指针置于fillRect（）上

1 个答案: