make canvas height auto

问题:

I have the canvas

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

It work fine on chrome and firefox. However, ie can work only with width:100% but not change the height (height on 679)

I try height to be auto and 100% but getting wose

Edit: finally! I got it. It's true that the canvas content will be not good at width 100%. However, for the height (IE9 above is work) you have to set height style

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

And use Jquery to re-size the canvas

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

for re-size window apply on document.ready

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

回答1:

If you use CSS to resize canvas you are actually reshaping the canvas's viewport.

Think of this as scaling the image. Just like when you resize a .jpg image, you can get pixilation and distortion.

Instead resize the canvas element's size.

Think of this as adding more empty pixels to the width and height of the canvas, rather than "stretching" the existing pixels.

Here's how to add pixels to the canvas element to make it 100% of the browser window:

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

If you are resizing your browser window, you can put this code in the windows resize handler to make it happen automatically.

Note: Whenever you resize the canvas this way, you will have to redraw the canvas contents.

回答2:

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

And use Jquery to re-size the canvas

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

for re-size window apply on document.ready

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