HTML canvas 尺寸正确，但上下文使用默认尺寸

Question

我在 HTML 页面的 div 中有一个 canvas 元素。我已经通过 CSS 将其宽度和高度设置为父级 div 的 100%，并且设置正确。我定义了一个 "draw" 函数，并像这样使用它： <body onload="draw();"> 。它是这样实现的：

function draw() {
    var cm = 6; // canvas margin

    var canvases = document.getElementsByClassName('container'); 
    for (var i=0; i<canvases.length; i++) {
        var c = canvases[i];
        var w = c.offsetWidth;
        var h = c.offsetHeight;

        console.log('w: ' + w + '; h: ' + h);

        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#561a04';

        ctx.moveTo(cm, cm);
        ctx.lineTo(w-cm, cm);
        ctx.lineTo(w-cm, h-cm);
        ctx.lineTo(cm, h-cm);
        ctx.lineTo(cm, cm);

        ctx.stroke();
   }
}

现在：控制台打印 canvas 的宽度和高度的真实且正确的值（特别是 381 和 188）；但似乎上下文绘制时 canvas 是其默认尺寸...事实上，如果我简单地设置 w = 330; h = 150; 它会按预期工作，但是 canvas 会拉伸绘图我对结果不满意。

如何使上下文使用 canvas 的正确维度？每次 canvas 调整大小时我都想重新绘制图像，但我相信任何 div 的调整大小时都没有事件，对吗？

谢谢。

Answer 1

我已经使用 canvas 一段时间了，而不是在 css 中将其设置为 100%，而是在 Javascript

中将其设置为 100%

编辑：

我没注意到你想将它设置为 parents div 的 100%，这应该可以了

请试试这个：

var canvas = document.getElementById("canvas");
canvas.width = canvas.parentElement.offsetWidth; //set canvas width to its parent width
canvas.height = canvas.parentElement.offsetHeight;//set canvas height to its parent height
var ctx = canvas.getContext("2d");

这将设置 canvas 宽度和高度以匹配其父母的宽度和高度

如果这能解决您的问题，请告诉我！

Answer 2

canvas 本身和 canvas 元素都有宽度和高度，它们是不同的东西。如果它们不相同，canvas 的内容会自动缩放以适合元素。如果你想要一个 1:1 关系，你需要设置 canvas.

的实际 width 和 height

就在：

之后

var w = c.offsetWidth;
var h = c.offsetHeight;

添加

c.width = w;
c.height = h;

示例：

function draw() {
    var cm = 6; // canvas margin
    
    var canvases = document.getElementsByClassName('container'); 
    for (var i=0; i<canvases.length; i++) {
        var c = canvases[i];
        var w = c.offsetWidth;
        var h = c.offsetHeight;
        c.width = w;
        c.height = h;

        console.log('w: ' + w + '; h: ' + h);

        var ctx = c.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#561a04';

        ctx.moveTo(cm, cm);
        ctx.lineTo(w-cm, cm);
        ctx.lineTo(w-cm, h-cm);
        ctx.lineTo(cm, h-cm);
        ctx.lineTo(cm, cm);

        ctx.stroke();
   }
}
draw();

.parent {
  width: 200px;
  height: 200px;
  position: relative;
}
.parent canvas {
  width: 100%;
  height: 100%;
}

<div class="parent">
  <canvas class="container"></canvas>
</div>
<div id="status"></div>

HTML canvas 尺寸正确，但上下文使用默认尺寸

HTML canvas dimensions are right but the context uses the default ones

html

javascript

canvas

dimension