Animacija
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="pahulje.js">
</script>
</head>
<body>
<canvas id="scene" width="1600" height="800" >
</canvas>
<audio class="center" src="pjesmaS.ogg" controls loop autoplay></audio>
</body>
</html>
]]>
CSS
<![CDATA[
html, body{
border: 0px;
margin: 0px;
padding: 0px;
}
canvas#scene {
display: block;
}
.center {
margin: 0 auto;
width: 300px;
display: block;
}
]]>
JScript
<![CDATA[
window.onload = function() {
var canvas = null;
var context = null;
var snowflakeImage = null;
var snowflakes = [];
var deg = Math.PI/180;
canvas = document.getElementById("scene");
context = canvas.getContext("2d");
centerX = canvas.width / 2,
centerY = canvas.height - 30,
angle = Math.PI * 0.8,
radius = 250;
var tmpImage = new Image();
tmpImage.src = "pahulja2.png";
tmpImage.onload = function() {
snowflakeImage = tmpImage;
}
canvas.onclick = function(e) {
var x = e.clientX;
var y = e.clientY;
addSnowflake(x, y);
}
var started = setInterval(drawFlakes, 10);
function addSnowflake(x, y) {
var flake = new Flake(x, y, snowflakeImage);
snowflakes.push(flake);
}
function Flake(x, y, image) {
this.width = 110;
this.height = 110;
this.x = x;
this.y = y;
this.image = image;
this.updateY = function(maxY) {
this.y += 1;
if (this.y > maxY) {
this.y = -(this.width/2);
}
}
}
function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {
var len = str.length, s;
context.save();
context.translate(centerX, centerY);
context.rotate(-1 * angle / 2);
context.rotate(-1 * (angle / len) / 2);
for(var n = 0; n < len; n++) {
context.rotate(angle / len);
context.save();
context.translate(0, -1 * radius);
s = str[n];
context.fillText(s, 0, 0);
context.restore();
}
context.restore();
}
function drawFlakes() {
context.clearRect(0, 0,
canvas.width,
canvas.height);
for (var i = 0; i < snowflakes.length; i++) {
var flake = snowflakes[i];
context.drawImage(flake.image,
flake.x, flake.y,
flake.width, flake.height);
flake.updateY(canvas.height);
context.font = '50pt Calibri';
context.textAlign = 'center';
context.fillStyle = '#008A2E';
context.lineWidth = 5;
drawTextAlongArc(context, 'Merry Christmas!', 740, 500, radius, angle);
}
}
}
]]>