我在 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 拉伸(stretch)了绘图，我对结果不满意。
我该怎么做才能使上下文使用正确的 Canvas 尺寸？我想在每次调整 Canvas 大小时重新绘制图像，但我相信调整任何 div 大小时都没有事件，对吗？
谢谢。
最佳答案
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>关于javascript - HTML Canvas 尺寸正确，但上下文使用默认尺寸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43407952/