没有得到实际的画布高度和宽度，并且 fillRect 被模糊了答案

【问题标题】：Not getting actual canvas height and width, and fillRec()t is blurred out没有得到实际的画布高度和宽度，并且 fillRect 被模糊了
【发布时间】：2018-08-12 11:42:27
【问题描述】：

我刚开始使用 HTML 中的 <canvas>，我遇到了一些问题。

我正在尝试使用 CSS 设置画布的宽度和高度，但没有获得实际值，即即使在 CSS 中更改高度后，它仍将高度设为 150，宽度始终设为 300。
fillRect() 给了我模糊的图像，但我想要清晰的图像。为此，我查找了其他资源，其中说 fillRect() 和 strokeRect() 一半在 x、y 坐标内部和一半在外部。这是link。但我无法理解这个人究竟在做什么来解决这个问题。

这是我的代码

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Drawing</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        h1 {
            background-color: #2DE0E6;
            color: black;
            text-align: center;
            font-style: oblique;
            width: 100%;
            height: 100px;
            line-height: 100px;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-family: 'Courier New';
            font-size: 40px;
        }
        #canvas-container {
            width: 100%;
            text-align: center;
            margin: auto;
            float: right;
        }
        #myCanvas {
            border: 1px solid #c3c3c3;
            width: 65%;
            height: 450px;
            display: inline;
        }
    </style>
</head>
<body>
    <h1>Canvas Drawing</h1>
    <div id="canvas-container">
        <canvas id="myCanvas"></canvas>
        <br /><br />
        Draw a rectangle
    </div>

    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        context.fillStyle = "#FF0000";
        context.fillRect(5.5, 10.5, 90, 80);
    </script>
</body>
</html>

此外，我们非常感谢您提供一些深入了解 <canvas> 的资源。

【问题讨论】：

标签： html css html5-canvas

【解决方案1】：

您的问题是画布有两种尺寸：实际的HTML 元素尺寸和绘图表面尺寸

使用 CSS 调整画布大小时，只会影响绘图大小。要更改元素大小，您需要使用canvas 元素内的height 和width 属性进行设置。

这就是为什么你总是得到150 x 300 像素。这是画布元素的默认大小。您实际上并没有改变 canvas 元素的大小，只是改变了它的绘图表面的大小。

像这样改变你的画布元素

<canvas id="myCanvas" width="600" height="800"></canvas>

如果您想要更多动态值，可以使用javascript 动态更改height 和width 属性的值。

var canvas = document.getElementById('myCanvas');
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight / 2;

以这种方式更改大小会调整元素和绘图表面的大小。使用CSS 调整大小只会修改画布绘图表面。

图像模糊可能是画布大小调整错误造成的，但我不确定。

这里有更多信息：Canvas Basic Usage

【讨论】：

感谢@pato，它就像魅力一样。现在唯一困扰我的是，每当我更改标签的高度和宽度时（就像我对
所做的那样），它正在改变标签的行为（因为视口中的整个
区域都会受到影响，但在

所做的那样），它正在改变标签的行为（因为视口中的整个

区域都会受到影响，但在 的情况是改变绘图表面的大小而不是画布的大小。为什么会发生这种情况。？

区域都会受到影响，但在