画布线宽度随着浏览器窗口大小的变化而变化，任何想法都可以解决

Canvas line width changes as browser window size changes, any idea to work around?

本文关键字：变化 任何想 解决 都可以 窗口大小 布线 浏览器      更新时间：2023-09-26

我在div里面有一个画布，它填充了整个div。我在画布上画了一条线，但是当我调整浏览器窗口的大小时，画布上的线的宽度改变了，当我增加浏览器窗口的大小时，它的厚度增加了，并增加了一些模糊的线条。我发现问题出现在这里;我不使用画布的固定大小，而是使用%100的宽度和高度。

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

}当我使用固定大小的像素宽度和高度，它是可以的。但是我想在不影响内部绘图的情况下调整画布的大小。你可以在这里试试:http://codepen.io/ertugrulmurat/pen/nxhof

只是尝试改变浏览器窗口的高度。

不幸的是，这是相当复杂的修复。基本上你需要:

  1. 为调整大小事件和
    2. 的窗口添加一个事件侦听器
  2. 改变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();
}

我看了一下，似乎canvas元素不能很好地处理CSS，最好将宽度和高度定义为标记的一部分，例如

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

当然，唯一的问题是这些值只在px中。我的工作将是使用javascript，因此收集父大小，并在resize事件上输入新的值。我已经把所有这些写在一个jfiddle中，如果你调整大小，它会很好地工作。

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

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

相关文章：