Question

我在填充（x，y，宽度，高度）方面遇到两个奇怪的问题。

将“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函数工作正常，那么发生了什么？我是怎么打破它的？

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>

＆＃34;宽度＆＃34;和＆＃34;身高＆＃34;属性指示绘图表面的大小，默认情况下为300x150。设置画布的CSS宽度和高度将扩展或缩小绘图表面，但不会更改曲面中的像素数。 fillRect需要坐标在＆＃34;绘图表面＆＃34;像素，而不是＆＃34; HTML页面像素＆＃34;。

HTML5 JS fillRect（）奇怪的行为

1 个答案: