使画布高度自动答案

【问题标题】：make canvas height auto使画布高度自动
【发布时间】：2023-04-03 10:15:01
【问题描述】：

我有画布

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

它在 chrome 和 firefox 上运行良好。但是，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";
 }
}

适用于 document.ready 的 re-size 窗口

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

【问题讨论】：

你不能使用 css 应用高度？
@sajay 我将 css 内联画布添加到 height:100% 和 height:auto。结果更小，调整大小时保持不变
感谢您推荐使用 css :)
@user1128331 CSS 不适用于画布，因为它会拉伸画布。也请参阅 markE 的答案。
@user1128331 删除了您的编辑。不要靠近主题。人们正在利用自己的时间来帮助您，因此请考虑下面提供的解决方案。如果您自己找到了解决方案，您可以将其发布为答案。见stackoverflow.com/help/self-answer

标签： html canvas height

【解决方案1】：

如果您使用 CSS 调整画布大小，您实际上是在重塑画布的视口。

将此视为缩放图像。就像调整 .jpg 图像的大小一样，可能会出现像素化和失真。

改为调整画布元素的大小。

将此视为在画布的宽度和高度上添加更多空像素，而不是“拉伸”现有像素。

以下是如何将像素添加到画布元素以使其 100% 显示在浏览器窗口中：

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

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

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

【讨论】：

我做 swf 并用 CreateJS 导出转换，所以我不知道如何重绘内容。
感谢您在 canvas.width 和 canvas.height 上帮助我
谢谢，我认为这确实应该被标记为答案 - 结合 window.onresize 事件，markE 的上述解决方案是大多数人真正想要的全屏画布。像 OP 自己的答案显示那样设置 canvas.style.height 是没有意义的，因为你最终会得到一个模糊和扭曲的画布。

【解决方案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";
 }
}

适用于 document.ready 的 re-size 窗口

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

【讨论】：