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

我想設置寬度100％並將其限制爲最大寬度到我的畫布元素。無論畫布寬度如何，我都希望擁有靜態畫布高度。但是，當我用CSS設置它時，似乎瀏覽器用標準siza繪製畫布，並將canvas重新設爲100％寬度，並使其高度達到100％。但最糟糕的是，它會在畫布內縮放圖片。我也嘗試從JS設置畫布的CSS寬度屬性，但它導致了相同的結果。設置畫布寬度100％和最大寬度

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

使得與100像素的寬度和高度630像素

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

和CSS

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

使得畫布100％的寬度但proportionaly調整大小高度和縮放畫布內的圖像畫布。用JS設置CSS也一樣。

我該怎麼做？

來源

2014-09-05 Alex Velickiy

發表一段代碼讓我們看看或做小提琴 – Richa 2014-09-05 09:47:58

我認爲這只是畫布的行爲。如果您放入的圖像與您的畫布尺寸不同，它會縮放並拉伸。我想.. – 2014-09-05 10:05:14

我的畫布是一個國家的互動地圖。用戶可以縮放和移動該地圖。所以我希望這幅畫布儘可能大，並且裏面的地圖尺寸相同。 – 2014-09-05 10:10:17

畫布元素的繪製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);

寬度ATTRIB同時設置的CSS和API寬度如果它們不通過其他方式設置，但100％的寬度是不是有效的API所以API回落到400px的默認寬度。

根據您的問題，您需要同時使用100％的CSS寬度並將畫布API設置爲或設置爲任意數量的像素。 jquery $（window）.width（）爲我們提供了100％的像素數。

來源

2014-09-05 10:16:53 Wayne

但是，當我將畫布大小設置爲兩倍時，在此示例中，它將變成瀏覽器窗口寬度的兩倍（並且因此我將獲得水平滾動），而實際畫布高度將爲1260，而不是我需要的。我不明白你的反別名提示。 – 2014-10-16 15:19:18

@Tigrokonvel我加了一個jsfiddle – Wayne 2014-10-17 06:14:15

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

回答

相關問題