Javascript HTML5 JS fillRect（）奇怪的行为

关于fillrect（x，y，width，height），我有两个奇怪的问题

将“高度”的值乘以2

X和y应该设置为鼠标位置，但矩形位于左下角，并且随着鼠标移动到左下角而远离

这段代码来自一个视频教程，代码似乎适用于这个家伙和视频，以及其他所有人，因为没有人评论有相同的问题。总之，代码如下：

function doFirst(){
    canv = document.getElementById('canvas');
    canvas = canv.getContext('2d');

    document.addEventListener("mousemove", onMouseMove, false);
}

function onMouseMove(e){
    canvas.clearRect(0, 0, canv.width, canv.height);
    var x = e.clientX;
    var y = e.clientY;
    canvas.fillRect(x, y, 50, 50);
}

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

我想我可能错过了教程中的一个步骤，在反复检查之后，我决定将其简化为只绘制一个没有鼠标侦听器的矩形，但画布仍然以2倍的高度和大约2倍的y位置绘制它

function doFirst(){
    canv = document.getElementById('canvas');
    canvas = canv.getContext('2d');

    canvas.fillRect(10, 10, 50, 50);
}

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

---

就在前几天，当我第一次开始使用HTML5画布时，fillRect函数运行良好，那么发生了什么？我怎么弄坏的

我认为这是因为您试图使用CSS设置画布的宽度和高度：

<!--Sets size of the canvas on the page-->
<canvas id="canvas" style="width:500px; height:500px;"></canvas>

相反，请使用以下命令：

<!--Sets drawing surface size-->
<canvas id="canvas" width="500" height="500"></canvas>

“宽度”和“高度”属性表示图形表面的大小，默认情况下为300x150。设置画布的CSS宽度和高度将扩展或收缩绘图曲面，但不会更改曲面中的像素数<代码>fillRect接受 坐标以“绘图表面”像素表示，而不是以“HTML页面像素”表示