Question

我刚开始使用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> 的深入知识的资源。

Answer 1

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

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

这就是为什么您始终获得150 x 300像素的原因。这是canvas元素的默认大小。您实际上并没有更改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

无法获得实际的画布高度和宽度，并且fillRec（）t模糊不清

1 个答案: