Я хочу разместить два холста горизонтально таким образом, чтобы первое полотно занимало 60% ширины, а другое занимало оставшиеся 40%.более одного холста, который должен быть размещен горизонтально
Так что же такое процедура с использованием javascript и css ???
PS: Код должен работать на кросс-платформе.
Вам просто нужно написать сценарий, который вычисляет ширину браузера и атрибут ширины ширины ширины холста 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>
Имейте в виду, что установка ширины CSS в конечном итоге растягивает/сжимает холст. Он не будет влиять на размер системы координат холста! Если вы хотите изменить это, вам придется изменить атрибуты ширины и высоты элемента canvas – devnull69
Мне кажется, как проблема css. –
Что вы пробовали? Вы можете легко достичь этого с помощью CSS, но вам нужно на самом деле приложить некоторые усилия. – MassivePenguin