[quote=rgl;244881]На SVG
Типа, прикол, за правильность работы во всех браузерах не отвечаю :-)
Гуд, только svg не надо каждый раз отрисовывать заново, в этом же вся суть
:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<style type="text/css">
body{background:#eef}
polyline{
stroke:black;
stroke-width:4px;
fill:none;
}
</style>
</head>
<body>
<input type="button" value="draw" onclick="f();">
Height: <input type="text" id="height" value="100">
Width: <input type="text" id="width" value="100">
Depth: <input type="text" id="depth" value="100">
<br />
<svg width="0" height="0" id="svg">
<polyline transform="translate(2,2)" id="polyline" points="0,0"/>
</svg>
<script type="text/javascript">
function id(i){return document.getElementById(i)}
function f() {
var svg = id("svg"),
polyline = id("polyline"),
h = +id("height").value,
w = +id("width").value,
d = +id("depth").value * 0.3;
svg.setAttribute('width', w+d + 4 );
svg.setAttribute('height', (h+=d) + 4 );
polyline.setAttribute('points',[0,d, 0,h, w,h, w+d,h-d, w+d,0, d,0, 0,d, w,d, w+d,0, w,d, w,h] )
}
</script>
</body>
</html>