html5 canvas ширина 100%

 
0
 
JavaScript
ava
shtuceron | 24.11.2011, 12:03
Здравствуйте, скажите, как можно поддерживать размеры canvas по ширине окна, чтобы при перерисовки содержимое не растягивалось, а сохраняло свои пропорции, пытаюсь сделать так, но при растяжении/сжатии окна контент пропадает полностью


<html>
<head>
<title>Metro Map</title>
<script type="text/javascript">
var canvas;
var ctx;

function resizeWindow() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

function resizeWindowEnded() {
draw();
}

function draw() {
canvas = document.getElementById('mapCanvas');

if (canvas.getContext) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx = canvas.getContext('2d');

ctx.lineWidth = 5;
ctx.strokeStyle = "black";

ctx.beginPath();
ctx.arc(75, 75, 10, 0, 2*Math.PI, true);
ctx.closePath();

ctx.stroke();
}
}
</script>
<style type="text/css">
body { margin: 0px 0px; padding: 0px 0px; }
#mapCanvas { border: 1px solid black }
</style>
</head>
<body onload="draw();" onresize="resizeWindow();" onresizeend="resizeWindowEnded();">
<canvas id="mapCanvas"></canvas>
</body>
</html>


Спасибо.
Kommentare (1)
ava
ksnk | 24.11.2011, 16:20 #
onresizeend
какой интересный метод. Он в самом деле работает? smile
Registrieren Sie sich oder melden Sie sich an, um schreiben zu können.
Unternehmen des Tages
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Mitwirkende
  ksnk   shtuceron
advanced
Absenden