Элемент HTML5 <canvas> не принимает относительные размеры (проценты) для его свойств width и height.
То, что я пытаюсь выполнить, - это иметь размер холста относительно окна. Это то, что я до сих пор придумал, но мне интересно, есть ли лучший способ:
- Simpler
- Не требует обертывания
<canvas>в<div>. - Не зависит от jQuery (я использую его для получения ширины/высоты родительского div)
- В идеале, не перерисовывается при изменении размера браузера (но я думаю, что это может быть необходимым)
Ниже приведен код, который рисует круг в середине экрана, 40% шириной до максимума 400 пикселей.
Live demo: http://jsbin.com/elosil/2
код:
<!DOCTYPE html>
<html>
<head>
<title>Canvas of relative width</title>
<style>
body { margin: 0; padding: 0; background-color: #ccc; }
#relative { width: 40%; margin: 100px auto; height: 400px; border: solid 4px #999; background-color: White; }
</style>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
function draw() {
// draw a circle in the center of the canvas
var canvas = document.getElementById('canvas');
var relative = document.getElementById('relative');
canvas.width = $(relative).width();
canvas.height = $(relative).height();
var w = canvas.width;
var h = canvas.height;
var size = (w > h) ? h : w; // set the radius of the circle to be the lesser of the width or height;
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(w / 2, h / 2, size/2, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
}
$(function () {
$(window).resize(draw);
});
</script>
</head>
<body onload="draw()">
<div id="relative">
<canvas id="canvas"></canvas>
</div>
</body>
</html>