HTML Canvas的相對大小

HTML5 <canvas>元素不接受其width和height屬性的相對大小（百分比）。HTML Canvas的相對大小

我想要完成的是讓我的畫布相對於窗口大小。這是我想出到目前爲止，但我不知道是否有這更好的辦法：

簡單
不需要在<div>包裹<canvas>。
不依賴於jQuery的（我用它來獲取父div的寬/高）
理想情況下，瀏覽器調整大小不重繪（但我認爲這可能是一個要求）

請參閱下面的代碼，它在屏幕中間繪製一個圓圈，寬度爲40％，最大爲400px。

代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Canvas of relative width</title> 
    <style> 
     body { margin: 0; padding: 0; background-color: #ccc; } 
     #relative { width: 40%; margin: 100px auto; height: 400px; border: solid 4px #999; background-color: White; } 
    </style> 
    <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script> 
     function draw() { 
      // draw a circle in the center of the canvas 
      var canvas = document.getElementById('canvas'); 
      var relative = document.getElementById('relative'); 
      canvas.width = $(relative).width(); 
      canvas.height = $(relative).height(); 
      var w = canvas.width; 
      var h = canvas.height; 
      var size = (w > h) ? h : w; // set the radius of the circle to be the lesser of the width or height; 
      var ctx = canvas.getContext('2d'); 
      ctx.beginPath(); 
      ctx.arc(w/2, h/2, size/2, 0, Math.PI * 2, false); 
      ctx.closePath(); 
      ctx.fill(); 
     } 

     $(function() { 
      $(window).resize(draw); 
     }); 
    </script> 
</head> 
<body onload="draw()"> 
    <div id="relative"> 
     <canvas id="canvas"></canvas> 
    </div> 
</body> 
</html>

來源

2011-08-24 Portman

畫布width和height屬性是從同一個畫布width和height風格分開。 width和height屬性是畫布渲染表面的大小（以像素爲單位），而其樣式則選擇文檔中瀏覽器應從渲染表面繪製內容的位置。恰巧width和height樣式的默認值（如果未指定）是渲染表面的寬度和高度。所以你對＃1是對的：沒有理由把它包裝在一個div中。您可以爲canvas元素上的所有樣式設置百分比值，就像任何其他元素一樣。

對於＃3，只要不在canvas元素上使用填充，使用clientWidth和clientHeight獲取大小是非常容易的（並且跨瀏覽器）。

我編碼了一些簡化版本here。

對於＃4，你說得對運氣不錯。可以在設置寬度和高度之前進行檢查，如果不需要調整大小，就可以將畫布留在原來的位置，這樣可以消除一些重繪，但無法擺脫所有這些重繪。

編輯：波特曼指出，我弄亂了居中風格。更新版本here。

來源

2011-08-24 03:26:53 sethobrien

謝謝。有趣的是，如果你想把它放在中心，你看起來像* do *需要將'canvas'包裝在'div'中。 'margin：0 auto'似乎並不像畫一個div那樣將畫布居中。 – Portman

@Portman不，你還可以。我只是忘記把display：block放在canvas樣式中（它的默認是inline-block，它不會以這種方式進行居中）。使用此修復程序更新答案。 – sethobrien

好的。這是我用來實現相同的技術。

假設你有畫布高度= 400，對於窗口的高度= 480，和你想改變它的高度比較，如果窗口的高度更改爲640

canvas = document.getElementById("canvas"); 
canvas.height=window.innerHeight*400/480;

PS：不初始化html標籤內的畫布高度。

利用'window.innerHeight'（它返回瀏覽器窗口的高度..類似'window.innerWidth'）任何你想要計算窗口上相對位置的地方。

希望你有你需要的東西。

來源

2011-08-24 08:14:11 Sri

像sethobrien所說的一個canvas元素有兩個對屬性的寬度/高度。

canvas.width/canvas.height約爲在於將包含繪圖命令的結果緩衝器的像素的大小。
canvas.style.width/canvas.style.height大約是用於在瀏覽器窗口中顯示畫布對象的大小，它們可以位於任何由css支持的單位中。

事實上，你可以設置canvas.width和canvas.height只有一次，做繪圖畫布，設置百分比的風格尺寸參數，然後忘掉重繪帆布內容。當然，這意味着瀏覽器只會像從網絡加載的常規圖像那樣進行縮放，因此可見結果將顯示像素縮放工件。

只有當您想要像素完美的結果時，您只需在畫布元素調整大小後重新繪製畫布內容。

來源

2011-08-24 08:28:31 6502

HTML Canvas的相對大小

回答

相關問題