使画布高度自适应

Question

我有画布。

<canvas id="canvas" width="1700" height="679" style="background-color:#ffffff;width:100%;overflow:hidden;margin-top: -7px;"></canvas>

在谷歌浏览器和火狐浏览器上工作正常。然而，在IE中只能使用width:100%，但不能改变高度（高度为679）

我尝试将高度设置为自动和100％，但效果更差了

编辑：终于！我明白了。 的确，在宽度为100％时画布内容不会很好。 但是，对于高度（IE9以上适用），您必须设置高度样式。

$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');

使用jQuery重新调整画布大小

function resizeIE()
{
  canvas = document.getElementById("canvas");
  if($.browser.msie) //only IE
  {
    $("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
//set the height style first

    if(window.innerWidth<960) //for other device (only for me)
    {
      var height_ie = (window.innerWidth*39.941176470588235294117647058824)/100;
      //to make the ratio of canvas find the pencentage
      //ex. canvas height: 1700px canvas width: 679px;
      //(679*100)/1700 = 39.941 <-- use this one
      //best solution
    }
    else
    {
      var height_ie = window.innerHeight-160; //just for the logo for my web
    }
    canvas.style.height = height_ie+"px";
 }
}

为了重新调整窗口大小，请在文档准备好时应用。

window.onresize = function(event) {
  resizeIE();
};

- user1128331

---

你不能使用 CSS 应用高度吗？ - undefined

@sajay 我在canvas中添加了css内联样式height:100%和height:auto。结果是变小了，并且在调整大小时保持不变。 - undefined

谢谢您推荐使用CSS :) - undefined

@user1128331 CSS在与画布(canvas)一起使用时效果不佳，因为它会拉伸画布。还请参考markE的答案。 - user1693593

@user1128331 撤销了您的编辑。请不要在主题中使用“关闭”一词。人们正在利用自己的时间来帮助您，请考虑下面提供的解决方案。如果您自己找到了解决方案，可以将其作为答案发布。请参阅http://stackoverflow.com/help/self-answer - user1693593

Answer 1

如果你使用CSS来调整画布大小，实际上是重新塑造了画布的视口。可以将此视为缩放图像。就像当你调整 .jpg 图像大小时一样，可能会获得像素化和失真。

相反地，调整画布元素的大小。可以将其视为在画布的宽度和高度上添加更多空白像素，而不是“拉伸”现有像素。

以下是如何添加像素到画布元素使其占满浏览器窗口的方法：

var canvas=getElementById("myCanvas");
canvas.width= window.innerWidth;
canvas.height=window.innerHeight;

如果您正在调整浏览器窗口大小，可以将此代码放入窗口调整处理程序中，以使其自动发生。

注意：每当以这种方式调整画布大小时，都必须重新绘制画布内容。

- markE

---

我使用SWF并通过CreateJS导出进行转换，因此不知道如何重新绘制内容。 - undefined

非常感谢你在canvas.width和canvas.height方面的帮助。 - undefined

谢谢，我认为这应该被标记为答案 - 结合window.onresize事件，markE的上述解决方案是大多数人实际上想要的全屏画布。像OP自己的答案所示那样设置canvas.style.height是没有意义的，因为你最终会得到一个模糊和扭曲的画布。 - undefined

Answer 2

$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');

使用jQuery重新调整画布大小。

function resizeIE()
{
canvas = document.getElementById("canvas");
  if($.browser.msie) //only IE
  {
$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
//set the height style first

if(window.innerWidth<960) //for other device (only for me)
{
  var height_ie = (window.innerWidth*39.941176470588235294117647058824)/100;
  //to make the ratio of canvas find the pencentage
  //ex. canvas height: 1700px canvas width: 679px;
  //(679*100)/1700 = 39.941 <-- use this one
  //best solution
}
else
{
  var height_ie = window.innerHeight-160; //just for the logo for my web
}
canvas.style.height = height_ie+"px";
 }
}

在文档准备就绪时应用重新调整窗口。

window.onresize = function(event) {
  resizeIE();
};

- user1128331