Čestitka
HTML
<![CDATA[
<!DOCTYPE HTML>
<html>
<head>
<title>Christmas card</title>
<meta charset="utf-8">
<link href="pahulje.css" rel="stylesheet" type="text/css"/>
<script src="crta_math_fraktal.js">
</script>
</head>
<body>
<canvas id="canvas" width="1600" height="420">
</canvas>
<video class='center' src="funny.ogv" type="video/ogg" autoplay="true" controls="true" ></video>
</body>
</html>
]]>
CSS
<![CDATA[
html, body{
background:#E8E8E8;
border: 1px solid black;
margin: 30px;
}
#canvas {
display: block;
width: 1600;
height: 420;
}
.center {
margin: 0 auto;
width: 600px;
display: block;
}
]]>
JScript
<![CDATA[
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var deg = Math.PI/180;
function snowflake(context, n, x, y, len){
context.save();
context.translate(x,y);
context.moveTo(0,0);
leg(n);
context.rotate(-120*deg);
leg(n);
context.rotate(-120*deg);
leg(n);
context.closePath();
context.restore();
function leg(n){
context.save();
if (n==0){
context.lineTo(len,0);
}
else{
context.scale(1/3, 1/3);
leg(n-1);
context.rotate(60*deg);
leg(n-1);
context.rotate(-120*deg);
leg(n-1);
context.rotate(60*deg);
leg(n-1);
}
context.restore();
context.translate(len,0);
}
}
snowflake(context, 2, 200, 350, 100);
snowflake(context, 3, 300, 80, 80);
snowflake(context, 3, 1000, 160, 80);
snowflake(context, 3, 1200, 260, 80);
snowflake(context, 3, 750, 260, 110);
snowflake(context, 2, 1460, 130, 80);
snowflake(context, 3, 0, 0, 125);
context.strokeStyle = "#0000E6";
context.lineWidth = 1;
context.stroke();
context.font="100px Lucida Console";
context.lineWidth = 3;
context.strokeStyle = 'green';
context.strokeText("Merry Christmas!",140,140);
context.translate(341, 410);
context.scale(1, -1);
context.font= '100px Lucida Console';
context.lineWidth = 3;
context.strokeStyle = 'red';
context.strokeText('Merry Christmas!',140,140);
}
]]>