HTML Canvas 弧线绘制在错误的位置 JavaScript

Question

function Shooter(shooter)
{
shooter.parent.style.width = "300px";
shooter.parent.style.height = "200px";
shooter.parent.style.border = "1px solid";
shooter.parent.style.border.borderColor = shooter.borderColor;

var canvas = document.createElement("canvas");
canvas.style.width = "300px";
canvas.style.height = "200px";
canvas.addEventListener('mousedown', drawBullet, false);    
shooter.parent.appendChild(canvas);
}
function drawBullet(event){
var rect = this.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
var ctx = this.getContext("2d");
console.log(this);
console.log(x,y);
console.log(event.clientX, event.clientY);
ctx.fillStyle = "#ff2626"; // Red color
ctx.beginPath();
ctx.arc(x, y, 5, 0, Math.PI * 2);
ctx.fill();
}

在动态创建画布后尝试在鼠标位置绘制弧线，例如： 按下画布的右下角给了我正确的位置，但在按下的地方不会画弧，按中间会画出远离鼠标位置的弧线。检查解决方案并尝试不同的宽度和高度，如果画布大小为 250x100，则几乎绘制正确的弧形位置。

• HTML 代码包含脚本，并且仅包含一个带有类的正文。

Answer 1

使用

canvas.width = 300;
canvas.height = 200;

而不是

canvas.style.width = "300px";
canvas.style.height = "200px";

为什么？

默认情况下，画布宽度属性设置为 300，高度设置为 150。上下文将仅在这些维度内运行。设置画布的 CSS 高度和宽度只会将其缩放到指定的大小，这意味着您的弧线在 300x150 框中绘制，然后拉伸到 300x200。这会导致失真和定位不准确。

演示