設置畫布寬度100％和最大寬度

Question

我想將寬度設置為100％，並使用max-width將其限制為我的canvas元素。 無論畫布寬度如何，我都希望具有靜態畫布高度。 但是，當我使用CSS進行設置時，似乎瀏覽器使用標准的siza繪制畫布，並將畫布調整為100％的寬度，並且按比例調整其高度。 但最糟糕的是它會縮放畫布內的圖片。 我還嘗試從JS設置canvas的css width屬性，但結果相同。

<canvas id="myCanvas" width="100%" height="630px"></canvas>

制作寬度為100px，高度為630px的畫布

<canvas id="myCanvas"></canvas>

和CSS

#myCanvas {
    width:100%;
    height:630px;
}

使畫布的寬度為100％，但按比例調整高度，並縮放畫布內的圖像。 用JS設置css的功能相同。

我應該怎么做？

Answer 1

canvas元素的圖形API尺寸不需要與它在屏幕上占用的CSS尺寸匹配。 這樣一來，便可以根據需要進行子像素圖形處理（以創建具有抗鋸齒的平滑運動）。 因此，畫布寬度為100％意味着它不需要它應該使用的像素數，我相信您會獲得默認寬度400，就好像根本沒有使用寬度一樣。 但是，可以使用javascript將其更改為任意寬度。

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = $(window).width(); 
canvas.height = 630;

或做抗鋸齒。

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = $(window).width()*2; 
canvas.height = 630*2;

將畫布寬度設置為大於其在屏幕上的空間的數字。 每個畫布像素僅占用實際像素的1/2，並且運動看起來更像視頻。

更新添加的jsfiddle

http://jsfiddle.net/juaovd7o/

<canvas id="myCanvas" width="284px" height="120px">hello</canvas>
<canvas id="myCanvas2" style="width:284px;height:120px;"></canvas>
<img src="http://whitedove-coding.com/static/whitedove-829.png" id="dove">

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.rect(0, 0, 284, 120);
      context.lineWidth = 4;
      context.strokeStyle = 'black';
      context.stroke();
 var canvas2 = document.getElementById('myCanvas2');
      canvas2.width=568;
      canvas2.height=240;
      var context2 = canvas2.getContext('2d');
      context2.beginPath();
      context2.rect(0, 0, 568, 240);
      context2.lineWidth = 4;
      context2.strokeStyle = 'black';
      context2.stroke();
var img=document.getElementById("dove");
      context2.drawImage(img,0,0);
      context.drawImage(img,0,0);

如果未通過其他方式設置，則寬度屬性將同時設置css和API寬度，但是100％的寬度對API無效，因此API會退回到其默認寬度400px。

根據您的問題，您需要同時使用100％的CSS寬度，並將canvas API設置為或設置為多少像素？ jQuery $（window）.width（）給我們的像素數為100％。