如何使用JavaScript調整畫布大小？

如何使JavaScript canvas（或者400px by 400px的繪圖區域被調用）大於400x400？如何使用JavaScript調整畫布大小？

我有一個1440p的屏幕，當我通過HTML文件運行我的JS文件時，畫布左上角的400px乘400px框並不奇怪。

有什麼我可以做的，以擴大帆布到指定的高度和寬度？

2016-09-18 B. Freeman

請包括您的代碼或製作一個jsfiddle，以便我們可以處理您的代碼。或告訴你這個問題 –

下面的jsfiddle演示瞭如何調整畫布大小。 https://jsfiddle.net/jaredwilli/qFuDr/

(function() { 
 
     var canvas = document.getElementById('canvas'), 
 
       context = canvas.getContext('2d'); 
 

 
     // resize the canvas to fill browser window dynamically 
 
     window.addEventListener('resize', resizeCanvas, false); 
 
     
 
     function resizeCanvas() { 
 
       canvas.width = window.innerWidth; 
 
       canvas.height = window.innerHeight; 
 
       
 
       /** 
 
       * Your drawings need to be inside this function otherwise they will be reset when 
 
       * you resize the browser window and the canvas goes will be cleared. 
 
       */ 
 
       drawStuff(); 
 
     } 
 
     resizeCanvas(); 
 
     
 
     function drawStuff() { 
 
       // do your drawing stuff here 
 
     } 
 
})();

來源

2016-09-18 22:09:48

你宣佈通過HTML畫布？如果你是，你可以使用：

<canvas id="myCanvas" width="1400" height="900"></canvas>

如果你想改變通過JavaScript的大小，你可以使用：

<script type="text/javascript"> 
    document.getElementById('myCanvas').height = 800; 
    document.getElementById('myCanvas').width = window.innerWidth; 
</script>

來源

2016-09-18 22:10:52 qwertyuiop

由於JavaScript是也許會忽略CSS嘗試設置畫布寬度&高度在JavaScript &用CSS例如，我希望我的畫布有750px的650像素的寬度和高度，如果你的ID被稱爲畫布，也是在畫布上添加標記寬度&高度

canvas.width = 650px; 
canvas.height = 750px;

來源

2016-09-18 22:15:22

如果您正在爲您的項目使用Processing.JS，我可能會提供幫助。我不確定它是否適用於常規JavaScript。如果你想自動檢測屏幕尺寸，也可以這樣

var screenSizeH = screen.height;

var screenSizeW = screen.width;

你可能會遇到的問題，但它是值得一試，雖然

size(screenHeight, screenWidth);

。調整畫布大小隻是調整畫布大小，而不是內部任何東西。

解決這個問題的方法是將所有的東西都乘以一個比例。

var scaless = screenSize/400;

你將不得不乘以一切乘以規模，即如果它是一個平方。您必須爲高度和寬度製作2個刻度

來源

2016-09-18 22:58:08

canvas元素與任何標準DOM對象相似。因此，您可以使用標準的CSS調整畫布：

<canvas /> 
<style> 
canvas { 
    width: 100%; 
    min-height: 400px; 
} 
</style>

https://jsfiddle.net/z3pL9qp9/

畫布容易重塑;這是您需要重新繪製的內容，以確保您考慮了維度變化。

來源

2016-11-25 20:48:50 Glycerine

如何使用JavaScript調整畫布大小？

回答

相關問題