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

我在HTML页面中的div中有一个画布元素。我已经通过CSS将它的宽度和高度设置为父div的100％，并且它将它们设置正确。我定义了一个“绘图”函数，并且我使用它：<body onload="draw();">。而它的实现是这样的：HTML画布尺寸是正确的，但上下文使用默认的尺寸

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的大小都没有变化，对吗？

谢谢。

来源

2017-04-14 Deboroh88

显示画布的HTML也是如此。 –

使用CSS设置宽度和高度会更改元素的宽度和高度，而不是上下文的宽度和高度。用'c.width'和'c.height'设置上下文。 –

我怀疑你遇到了这个问题：http://stackoverflow.com/questions/34250356/dimensions-of-a-canvas/34250408 –

画布本身和画布元素都有宽度和高度，它们是分开的东西。如果它们不相同，画布的内容会自动缩放以适应元素。如果您想要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>

来源

2017-04-14 08:36:11

它的工作原理！谢谢！！ :) – Deboroh88

我一直在使用的画布了一段时间，而不是在CSS其设置为100％，将其设置为100％使用JavaScript

编辑：

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

这将设置画布宽度的d高度以匹配它的父母宽度&高度

请让我知道，如果这可以解决您的问题！

来源

2017-04-14 08:33:43

它解决了我的问题！：）谢谢！ – Deboroh88

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

回答

相关问题