多个画布水平放置

我想放置两个水平画布，使第一个画布占据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

多个画布水平放置

回答

相关问题