2

キャンバスを持っています

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

クロムとファイアフォックスで問題なく動作します。ただし、幅: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 に適用します

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

2 に答える 2

2

CSS を使用してキャンバスのサイズを変更すると、実際にはキャンバスのビューポートの形状が変更されます。

これを画像のスケーリングと考えてください。.jpg 画像のサイズを変更する場合と同様に、ピクセル化や歪みが発生する可能性があります。

代わりに、キャンバス要素のサイズを変更してください。

これは、既存のピクセルを「引き伸ばす」のではなく、キャンバスの幅と高さに空のピクセルを追加することと考えてください。

canvas 要素にピクセルを追加して、ブラウザー ウィンドウの 100% にする方法を次に示します。

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

ブラウザー ウィンドウのサイズを変更する場合は、このコードをウィンドウのサイズ変更ハンドラーに配置して、自動的にサイズ変更を行うことができます。

注: この方法でキャンバスのサイズを変更するたびに、キャンバスの内容を再描画する必要があります。

于 2013-06-20T16:58:42.050 に答える
0 
$("#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();
};
于 2013-06-25T02:21:50.807 に答える