画布css奇怪的属性[重复]答案

【问题标题】：Canvas css weird properties [duplicate]画布css奇怪的属性[重复]
【发布时间】：2021-03-25 03:18:52
【问题描述】：

我试图用css而不是javascript声明html画布的大小，这不知何故导致用js绘制的大小和对象看起来都很奇怪。这是我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Computing Animatie</title>
    <style>
        body {
            overflow: hidden;
            background-color: black;
            background-image: url('./pictures/project_bg.jpg');
            background-size: 1375px;
        }

        canvas {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="can"></canvas>
    <script src="animation.js"></script>
</body>
</html>

这是我的 javascript 代码：

const can = document.getElementById('can');
const ctx = can.getContext('2d');

(function test(){
    ctx.beginPath();
    ctx.fillStyle = 'red';
    ctx.fillRect(100, 100, 50, 50);
    ctx.closePath();
})();

当我运行它时，矩形会被奇怪地拉伸。我希望任何人都知道...

【问题讨论】：

更改画布CSS属性position: relative;
如果您希望动态调整画布大小而不会出现缩放问题，则必须使用 JS 来完成。您可以创建一个resize 事件监听器来检测页面宽度，然后设置<canvas> 的width 和height 属性。然后相应地重新绘制其上的所有对象。 CSS 无法设置这些属性。
这是一个相关的问题：stackoverflow.com/questions/1664785/…

标签： javascript html css canvas

【解决方案1】：

您应该在 JavaScript 而不是 CSS 中设置画布的高度和宽度。您可以使用window.innerWidth 和window.innerHeight 来做到这一点。

你的代码应该是这样的：

const can = document.getElementById('can');
const ctx = can.getContext('2d');

function myFunction() {
  can.width = window.innerWidth;
  can.height = window.innerHeight;
  ctx.beginPath();
  ctx.fillStyle = 'red';
  ctx.fillRect(100, 100, 50, 50);
  ctx.closePath();
}

(function test(){
    ctx.beginPath();
    ctx.fillStyle = 'red';
    ctx.fillRect(100, 100, 50, 50);
    ctx.closePath();
})();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Computing Animatie</title>
    <style>
        body {
            overflow: hidden;
            background-color: black;
            background-image: url('./pictures/project_bg.jpg');
            background-size: 1375px;
        }

        canvas {
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body onresize="myFunction()">
    <canvas id="can"></canvas>
    <script src="animation.js"></script>
</body>
</html>

我只是去掉了CSS中设置的高度和宽度，并在JavaScript中应用了它。

【讨论】：

绝对可以！问题是，我试图在 css 中执行此操作，因为这样它会在调整窗口大小时自然更新（例如，当控制台打开/关闭时），这在 javascript 中不会发生，除非您添加执行该操作的代码.有什么方法可以使用 css 而不是 javascript？
据我所知，我很确定你不能在 css 中做到这一点，但你可以在 JavaScript 中做到这一点。我对答案中的代码进行了一些更改以使其调整大小。我在 body 上使用了 onresize 函数。我还必须这样做，以便每次调整窗口大小时都重新绘制矩形，否则矩形会消失。希望这会有所帮助！
哇，确实如此，我以为会有一个关于调整大小的事件，但现在我也知道名字了！非常有帮助亲爱的先生:)

【解决方案2】：

将画布的宽度和高度定义为相对大小100% 通常是个坏主意。您应该在标记中设置画布宽度和高度的属性以避免此类行为。

【讨论】：

is generally a bad idea - 为什么？
@MrT 因为光栅图形被绘制到画布上，然后应用了 CSS，这会导致缩放问题。
（对不起，这里是初学者）标记是什么？你建议我怎么做...
@Calculuswhiz 我明白了。答案的措辞方式是提出其他问题（至少对我来说是这样）。
为什么这是个坏主意？！