Question

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

#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规则设置画布的宽度。这不会很好。如果没有为画布设置大小，无论CSS设置什么，它都默认为300 x 150像素。这意味着它中的所有内容都被缩放（就像它是一个固定大小的图像，这是一个画布基本上是什么）。如果您执行设置大小但仍然使用CSS，那么将缩放大小。

您的性能和质量都有所下降，您还需要重新计算鼠标位置。

您需要从Javascript更新大小。

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

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

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

        //call redraw
   }

或者如果你想将它设置为一个百分比，你需要自己计算，因为画布不需要％-value。

    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？这表示您看到的窗口的实际视口（您将使用移动设备更清楚地看到这一点）。

如果您只想要固定尺寸，可以直接设置：

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

为什么需要更新（重绘所有内容）？ Canvas只保存绘制的任何内容的快照 - 它不会保留它的副本。屏幕上的内容是它。

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

Answer 2

问题在于你的javascript。我检查了你提供的网站上的Paint.js。你用过

var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
canvasWidth = canvas.width,
canvasHeight = canvas.height;

同时，你的html设置中的画布宽度和高度为800 * 600。

<canvas id="canvas" width="800" height="500"></canvas>

因此，canvas.width（height）将返回html中的任何内容。然后使用800和600进行计算，而不是画布的实际大小。这就是为什么画布看起来像是以一种奇怪的方式放大了。

您应该使用canvas.scrollWidth和canvas.scrollHeight来获取实际的宽度和高度信息。祝你好运！

Answer 3

调整画布大小时，需要相应地重置其宽度和高度。您可以在onresize事件中执行此操作：

window.onresize = function () {
    canvas.width  = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;

    // repaint everything
}

您需要为绘图画布和光标画布执行此操作。请记住，在调整画布大小和you will need to repaint时，所有内容都将被清除。

Answer 4

请注意，当画布调整大小时，它会自动清理，这意味着画布上的所有内容都已完全消失。所以我建议你不要选择百分比或者在resize事件上附加重新绘制功能！

画布调整大小抛弃听众x y

4 个答案: