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

【问题标题】：Canvas line width changes as browser window size changes, any idea to work around?画布线宽随着浏览器窗口大小的变化而变化，有什么想法可以解决吗？
【发布时间】：2014-09-29 04:53:44
【问题描述】：

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

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

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

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

【问题讨论】：

画布宽度属性查看：stackoverflow.com/questions/2588181/….

标签： javascript css html canvas

【解决方案1】：

不幸的是，这需要修复。基本上你需要：

为调整大小事件和窗口添加一个事件监听器
每次调整窗口大小时，更改画布标签上的 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();
}

【讨论】：

顺便我了解到，重置画布的宽度和高度，会自动清除它！
是的。事实上，那是清除画布的最快方法。现在可能已经改变了。

【解决方案2】：

看了一圈，好像canvas元素对CSS的处理不好，最好把宽高定义为标签的一部分，比如

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

当然，唯一的问题是这些值仅以 px 为单位。我的解决方法是使用 javascript 来收集父大小并在调整大小事件中输入新值。我已经在 jsfiddle 中为您写下了所有这些内容，如果您调整大小，它会非常有效。

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

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

【讨论】：