Question

我有画布

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

它在chrome和firefox上运行良好。但是，即只能使用宽度：100％但不能改变高度（679的高度）

我尝试高度自动和100％但是得到了wose

编辑：终于！我知道了。确实，画布内容在宽度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

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

Answer 1

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

将此视为缩放图像。就像调整.jpg图像的大小一样，你可以得到像素化和失真。

而是调整画布元素的大小。

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

以下是如何向canvas元素添加像素以使其成为浏览器窗口的100％：

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

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

注意：每当您以这种方式调整画布大小时，您将不得不重绘画布内容。

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";
 }
}

用于重新调整大小窗口适用于document.ready

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

使画布高度自动

2 个答案: