HTML5 JS fillRect（）的奇怪行为(HTML5 JS fillRect() stran

我在与fillrect（X，Y，宽度，高度）两个奇问题。

1. 被乘以2“高度”的价值

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);

我想，也许我错过了在本教程的步骤，并检查无误，并在我决定简化它只是绘制一个矩形不用鼠标监听器，但在画布上仍与2X画它的高度和大约2倍的y位置。

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

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

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

该fillRect函数只是一天的工作很好，当我第一次开始使用HTML5画布玩，所以发生了什么事？ 我怎么打破它？

Answer 1:

我相信这是因为你试图使用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页面像素”的坐标。

文章来源: HTML5 JS fillRect() strange behavior