<!DOCTYPE html>
<html>
<head lang="ru">
<meta charset="utf-8">
<meta name="author" content="Anastasia Fedorova">
<title>HTML 5 + CSS 3 + javascript</title>
<link rel="stylesheet" href="style.css" media="all" />

<script type="text/javascript">
function init() {
var f_canvas = document.getElementById("first");
var f_context = f_canvas.getContext("2d");
f_canvas.width = 550;
f_canvas.height = window.screen.height-350;
Spider(f_canvas.width/2,f_canvas.height/2,90);
// паучок
function Spider(x,y,r){
f_context.beginPath();
f_context.arc(x, y, r, 0, Math.PI * 2, false);
f_context.closePath();
f_context.fillStyle = "#999";
f_context.fill();
var r1 = r/3;
y -= r + r1;
f_context.beginPath();
f_context.arc(x, y, r1, 0, Math.PI * 2, false);
f_context.closePath();
f_context.fillStyle = "#666";
f_context.fill();

f_context.beginPath();
for (var i = 1; i <= 4; i += 1) {
f_context.moveTo(x,y);
f_context.lineTo(x - Math.cos(i * Math.PI / 8)*r-5,y - Math.sin(i * Math.PI / 8)*r);
f_context.lineTo(x - Math.cos(i * Math.PI / 8)*r-5 - Math.sin(i * Math.PI / 8)*r-5,y - Math.sin(i * Math.PI / 8)*r + Math.cos(i * Math.PI / 8)*r);
f_context.moveTo(x,y);
f_context.lineTo(x + Math.cos(i * Math.PI / 8)*r+5,y - Math.sin(i * Math.PI / 8)*r);
f_context.lineTo(x + Math.cos(i * Math.PI / 8)*r+5 + Math.sin(i * Math.PI / 8)*r+5,y - Math.sin(i * Math.PI / 8)*r + Math.cos(i * Math.PI / 8)*r);
}
f_context.strokeStyle = "#333";
f_context.stroke();
}

}
</script>

</head>
<body onload="init()">
<h1>HTML 5 + CSS 3 + javascript</h1>
<p style="text-align: center">Рисунок можно сохранить в графическом формате, щелкнув по нему правой кнопкой мыши.</p>
<div id="canvas-block">
<canvas id="first">
</canvas>

</div>
</html>