javascript - 图像在 Canvas 中的位置不正确

Question

正如您在这里看到的:https://codepen.io/Le-future/pen/gKNoEE

我对图像有一个小问题，因为它们没有以圆圈为中心，有人可以帮忙吗？

    ctx.beginPath();
    ctx.arc(object.x, object.y, object.size/1.25, 0,2*Math.PI);
    ctx.fillStyle = object.couleur;
    ctx.fill();
    ctx.restore();

    ctx.drawImage(object.image, object.x, object.y, object.size, object.size);

Answer 1

更改:ctx.drawImage(object.image, object.x, object.y, object.size, object.size);

为此:ctx.drawImage(object.image, object.x-object.size/2, object.y-object.size/2, object.size, object.size);

为什么？您没有考虑对象的宽度和高度来使其居中。 x 和 y 位置位于对象的左上角，因此将这些点减去其宽度和高度的 1/2 即可使其居中。