javascript - Canvas 线宽随着浏览器窗口大小的变化而变化，有什么解决办法吗？

Question

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

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

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

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

Answer 1

不幸的是，这涉及修复。本质上你需要:

1. 为调整大小事件的窗口添加一个事件监听器，
2. 每次调整窗口大小时更改 canvas 标签上的 width/height 属性(不是 css，它保持在 100%)
3. 您还需要在每次调整大小时重新绘制线条。

请记住 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();
}