Question

我在div中有一个画布，它填满了整个div。我在画布上绘制了一条线，但是当我调整浏览器窗口的大小时，画布上线条的宽度会发生变化，因为我增加了浏览器窗口大小，它的厚度会增加，并为线条添加一些模糊。我发现问题出现在这里;我不使用固定大小的画布而是使用％100作为宽度和高度。

#myCanvas{
margin:0;
padding: 0;
border:0;
width: 100%;
height: 100%;
background-color: white;

} 当我在pixeel中使用固定大小的宽度和高度时，没关系。但我希望我的画布可以在不影响内部绘图的情况下调整大小。你可以在这里玩：http://codepen.io/ertugrulmurat/pen/nxhof

尝试更改浏览器窗口的高度。任何想法都将不胜感激。

Answer 1

遗憾的是，这很复杂。基本上你需要：

将事件侦听器添加到resize事件的窗口和
更改canvas标记上的width / height属性（不是css，保持100％）
每次调整大小时，您还需要重新绘制线条。

请注意，width / height属性是无单位的，因此请确保将其设置为width="100"而不是width="100px"

以下是代码的相关部分，其中包含更正：

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  ctx.canvas.width = ctx.canvas.clientWidth;
  ctx.canvas.height = ctx.canvas.clientHeight;      
  var draw = function(){
    ctx.lineWidth = 0.5;
    ctx.shadowBlur = 0;
    ctx.strokeStyle="#FF0000";       
    ctx.beginPath();
    ctx.lineWidth=0.5;
    ctx.lineCap="round";
    ctx.moveTo(20,20);
    ctx.lineTo(200,20);
    ctx.stroke();
    ctx.closePath();
  }

  window.addEventListener('resize', function(){
    ctx.canvas.width = ctx.canvas.clientWidth;
    ctx.canvas.height = ctx.canvas.clientHeight;
    draw();
  });
  draw();
}

Answer 2

我已经浏览了一下，看起来canvas元素并不能很好地处理CSS，并且最好将宽度和高度定义为标记的一部分，例如

<canvas width="200" height="100"></canvas>

当然唯一的问题是这些值仅以px为单位。我的工作是使用javascript来收集父级大小并在resize事件上输入新值。我已经在jsfiddle中为你写了所有这些，如果你调整大小，它的工作非常出色。

请注意，每次调整大小时都会调用重绘函数。如果您没有这样做，它将一直空白，直到下一次点击。

http://jsfiddle.net/N23w2/1/

随着浏览器窗口大小的变化，画布线宽会发生变化，有什么想法可以解决吗？

2 个答案: