- Код: Выделить всё
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
* {
margin: 0;
padding: 0;
zoom: 1;
font: 12px "Trebuchet MS", Verdana, Tahoma, sans-serif;
}
body {
margin: 10px;
background: #eff;
}
#round {
position: relative;
width: 50%;
}
.text {
position: relative;
z-index: 2;
padding: 6px 12px;
}
</style>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript">
function round() {
var cont = document.getElementById('round');
var canvas = cont.getElementsByTagName('canvas')[0];
canvas.setAttribute('width', cont.offsetWidth);
canvas.setAttribute('height', cont.offsetHeight);
canvas.style.position = 'absolute';
canvas.style.zIndex = 1;
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
roundedRect(ctx, 0, 0, cont.offsetWidth, cont.offsetHeight, 15, '#69c');
roundedRect(ctx, 6, 6, cont.offsetWidth - 12, cont.offsetHeight - 12, 9, '#fff');
}
}
function roundedRect(ctx, x, y, width, height, radius, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(x, y + radius);
ctx.lineTo(x, y + height - radius);
ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
ctx.lineTo(x + width - radius, y + height);
ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
ctx.lineTo(x + width, y + radius);
ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
ctx.lineTo(x + radius, y);
ctx.quadraticCurveTo(x, y, x, y + radius);
ctx.fill();
}
window.onload = round;
window.onresize = round;
</script>
</head>
<body>
<div id="round">
<canvas></canvas>
<div class="text">
Donec purus dui, interdum sed dignissim quis, pharetra non massa. Praesent vel ipsum erat. Fusce sollicitudin lacinia diam ac
bibendum. Cras elementum risus ac arcu interdum vulputate. Fusce quis elit eget massa gravida dictum. Nulla viverra sem id
ligula luctus molestie. Vestibulum sit amet sem ac tellus mattis commodo. In leo urna, volutpat nec laoreet nec, ultricies a
odio. Praesent eget nunc vel velit gravida faucibus. Maecenas nec tempus elit. Phasellus ut neque dui, sed imperdiet urna.
Nulla quis nisi sem. Aliquam erat volutpat. Cras interdum risus ut diam porttitor pulvinar tincidunt lorem ullamcorper. Nam
bibendum lorem ut mauris pharetra a vestibulum orci scelerisque.
</div>
</div>
</body>
</html>
Как видите в проклятом ИЕ нифига не работает (в чем я и не сомневался), но на одном сайте нашел инфу, что оказывается добрые люди из Гугля написали скрипт который лечит Эксплорер. Так что приведенный выше код абсолютно кроссбраузерный (ура!).
На чем тестировал: Mozilla Firefox 3.0.11, Opera 9.63, Google Chrome 2.0.172.33, Safari 3.1.2 (525.21), IE 6, IE 7, IE 8.
Ссылка на лекарство для ИЕ: http://explorercanvas.googlecode.com/fi ... vas_r3.zip
Ссылка на туториал на MDC: https://developer.mozilla.org/en/Canvas ... asic_usage
Надеюсь вам окажется полезным.
UPD:
Забыл написать про один минус - пока не понятно какой доктайп писать. Ибо с таким как в примере валидацию страница не пройдет. В сети рекомендуют писать просто <!DOCTYPE html>, хз хз...
