HTML5 JS fillRect() 奇怪的行为答案

【问题标题】：HTML5 JS fillRect() strange behaviorHTML5 JS fillRect() 奇怪的行为
【发布时间】：2012-11-13 11:48:16
【问题描述】：

我在使用 fillrect(x, y, width, height) 时遇到了两个奇怪的问题。

是将“身高”的值乘以二
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 函数运行良好，那么发生了什么？我是怎么打破它的？

【问题讨论】：

标签： javascript html html5-canvas

【解决方案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>

“width”和“height”属性表示绘图表面的大小，默认为300x150。设置画布的 CSS 宽度和高度会扩大或缩小绘图表面，但不会改变表面的像素数。 fillRect 需要 “绘图表面”像素中的坐标，而不是“HTML 页面像素”。

【讨论】：