javascript - Canvas 调整大小甩掉听众 x y

Question

在我的 html 中，我有以下内容可以使 Canvas 调整为宽度和高度百分比。

#canvas,
#canvasCursor {
    cursor: none;
    background: #fff;
    position: absolute;
    left: 50px;
    top: 30px;
    width: 62%;
    height: 80%;
    z-index: 1;
}

然而，这似乎增加了绘图和 x y 听众的大小。
只是 click here 你会明白我的意思。

Answer 1

两个问题:

1) 您正在使用 CSS 规则设置 Canvas 的宽度。这不会很好地工作。如果您没有为 Canvas 设置大小，无论您通过 CSS 设置什么，它都将默认为 300 x 150 像素。这意味着其中的所有内容都被缩放(就好像它是一个固定大小的图像，这基本上就是 Canvas )。如果您确实设置了尺寸但仍使用 CSS， 尺寸将被缩放。

您失去了性能和质量，您还需要重新计算鼠标位置。

您需要从 Javascript 更新尺寸。

#canvas, #canvasCursor {
    cursor: none;
    background: #fff;
    position: absolute;
    left: 50px;
    top: 30px;
    width: 62%; /* REMOVE */
    height: 80%;  /* REMOVE */
    z-index: 1;
}

2) 您没有从任何地方更新 Canvas 大小。您可以通过设置其宽度和高度属性来更新 Canvas - 将其设置为您可以使用的窗口的大小:

    window.onresize = function() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        //call redraw
   }

或者如果您想将它设置为百分比，您需要自己计算，因为 Canvas 不采用 % 值。

    window.onresize = function() {
        canvas.width = window.innerWidth * 0.62; //ie. 62% of width
        canvas.height = window.innerHeight * 0.8; //ie. 80% of height

        //call redraw
   }

Canvas 仅使用像素大小，因为此元素是一种特殊情况。

为什么是 innerWidth/Height？这表示您看到的窗口的实际视口(viewport)(使用移动设备您会看得更清楚)。

如果你只是想要一个固定的大小，你可以直接设置它:

canvas.width = 800;
canvas.height = 600;

为什么需要更新(重绘一切)？ Canvas 只保留绘制到它的任何内容的快照 - 它不保留它的副本。屏幕上显示的就是它。

调整大小时，它会重新初始化，因此您需要再次更新它。除非你有很多东西要重绘，否则这将有很少的性能成本。这只会在用户调整浏览器窗口大小时发生。