가로로 배치 할 캔버스가 두 개 이상

첫 캔버스가 너비 60 %를 차지하고 다른 캔버스가 나머지 40 %를 차지하도록 두 개의 캔버스를 가로로 배치하고 싶습니다.가로로 배치 할 캔버스가 두 개 이상

그럼 javascript와 css를 사용하는 절차는 무엇입니까 ???

추신 : 코드는 크로스 플랫폼에서 작동해야합니다.

2013-10-07 Prasad Vithu Sadaye

나에게 CSS 문제가있는 것처럼 보입니다. –

무엇을 시도 했습니까? CSS를 사용하면 쉽게이 작업을 수행 할 수 있지만 실제로 노력해야합니다. – MassivePenguin

브라우저 너비를 계산하고 너비 = 너비 * 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>

출처

2013-10-07 13:56:07 Bhushan

CSS 너비를 설정하면 결국 캔버스가 늘어나거나 압축됩니다. 캔버스 좌표계의 크기에는 영향을주지 않습니다! 이 값을 변경하려면 캔버스 요소의 너비 및 높이 특성을 변경해야합니다. – devnull69

가로로 배치 할 캔버스가 두 개 이상

답변

관련 문제