Question

我想放置两幅画布，以便第一幅画布占据60％的宽度，另一幅占据剩下的40％。

那么使用javascript和css ???

的程序是什么

PS：代码应该跨平台工作。

Answer 1

您只需要编写一个脚本来计算浏览器宽度并更改画布设置宽度=宽度* 4/10和宽度* 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>

不止一幅画布水平放置

1 个答案: