多個畫布水平放置

我想放置兩個水平畫布，使第一個畫布佔據60％的寬度，另一個佔據剩下的40％。多個畫布水平放置

那麼使用javascript和css的程序是什麼？ PS：代碼應該跨平臺工作。

2013-10-07 Prasad Vithu Sadaye

對我來說就像一個css問題。 – 2013-10-07 13:18:51

你有什麼嘗試？您可以使用CSS輕鬆實現此目的，但您需要付出一些努力。 – MassivePenguin

你只需要編寫一個腳本來計算瀏覽器寬度和更改寬度屬性的畫布設置width = width * 4/10和width * 6/10。下面的代碼將演示如何做到這一點。

<!DOCTYPE html> 
<html> 
<head> 
<title>Canvas Horizontal</title> 
<style> 
canvas{ 
float:left; 
border:1px solid black; 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
    <script> 
    $(document).ready(function(){ 
    var width=$(window).width(); 
    $("#one").attr("width",width*4/10-20); 
    $("#two").attr("width",width*6/10-20); 
    var height=$(window).height(); 
    $("#one").attr("height",height*3/4); 
    $("#two").attr("height",height*3/4); 
    }); 
    </script> 
</head> 
<body> 
<div> 
<canvas id="one" height="500" width="500"></canvas> 
<canvas id="two" height="500" width="500"></canvas> 
</div> 
</body> 
</html>

來源

2013-10-07 13:56:07 Bhushan

請注意，設置CSS寬度將最終拉伸/壓縮畫布。它不會對畫布座標系統的大小有任何影響！如果你想改變它，你必須改變canvas元素的寬度和高度屬性 – devnull69

多個畫布水平放置

回答

相關問題