Question

我在HTML页面的div中有一个canvas元素。我已经通过CSS将其宽度和高度设置为父div的100％，并且它正确设置它们。我定义了一个“绘图”功能，我这样使用它：<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();
   }
}

现在：控制台打印画布宽度和高度的实际值和正确值（特别是381和188）;但似乎上下文绘制就好像画布是默认尺寸的......事实上，如果我只是设置w = 330; h = 150;它按预期工作，但是画布拉伸了绘图，我对结果不满意。

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

谢谢。

Answer 1

我一直在使用canvas一段时间，而不是在css中将其设置为100％，使用Javascript将其设置为100％

编辑：

我没注意到你想把它设置为父母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");

这将设置画布宽度和高度以匹配它的parrents width＆amp;高度

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

Answer 2

画布本身和画布元素都有宽度和高度，它们是分开的东西。如果它们不相同，则会自动缩放画布的内容以适合该元素。如果您想要1：1的关系，则需要设置width的实际height和canvas。

就在之后：

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

添加

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

示例：

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

HTML画布尺寸是正确的，但上下文使用默认的

2 个答案: