This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function xmas() { | |
var b = document.getElementsByTagName('body')[0]; | |
var c = document.createElement('canvas'); | |
var ctx = c.getContext('2d'); | |
var flakes, flakeNumber = 250, gravity = 1, w, h, timer; | |
c.style.cursor = 'pointer'; | |
c.style.zIndex = '999999'; | |
c.style.top = 0; | |
c.style.left = 0; | |
c.style.position = 'absolute'; | |
b.appendChild(c); | |
c.onclick = function() { | |
c.parentNode.removeChild(c); | |
}; | |
window.onresize = function() { | |
window.clearTimeout(timer); | |
init(); | |
}; | |
function init() { | |
w = window.innerWidth - 20; | |
h = window.innerHeight - 20; | |
c.setAttribute('width', w); | |
c.setAttribute('height', h); | |
flakes = []; | |
for(var i=0; i<flakeNumber; i++) { | |
flakes.push({ | |
x: Math.random() * w, | |
y: ((Math.random() * h) - gravity) | |
}); | |
} | |
animate(); | |
} | |
function drawFlake(x, y) { | |
ctx.fillStyle = '#ffffff'; | |
ctx.beginPath(); | |
ctx.arc(x, y, 5, 0, Math.PI*2, true); | |
ctx.closePath(); | |
ctx.fill(); | |
} | |
function drawSanta(x, y) { | |
ctx.fillStyle = "white"; | |
ctx.strokeStyle = "black"; | |
ctx.globalAlpha = "1.0"; | |
ctx.lineWidth = "1"; | |
ctx.lineCap = "butt"; | |
ctx.lineJoin = "round"; | |
ctx.mitterLimit = "1"; | |
ctx.font = "normal normal 12 Courier"; | |
ctx.fillStyle = "#cf7122"; | |
ctx.beginPath(); | |
ctx.moveTo(190.50 + x, 110 + y); | |
ctx.bezierCurveTo(212.76 + x, 137.04 + y, 228.70 + x, 183.28 + y, 201 + x, 214.50 + y); | |
ctx.bezierCurveTo(177.76 + x, 240.70 + y, 137.26 + x, 243.54 + y, 115 + x, 216.50 + y); | |
ctx.bezierCurveTo(92.74 + x, 189.46 + y, 95.24 + x, 144.54 + y, 117.50 + x, 117.50 + y); | |
ctx.bezierCurveTo(139.76 + x, 90.46 + y, 168.24 + x, 82.96 + y, 190.50 + x, 110 + y); | |
ctx.closePath(); | |
ctx.fill(); | |
ctx.fillStyle = "white"; | |
ctx.strokeStyle = "black"; | |
ctx.fillStyle = "#dd381b"; | |
ctx.beginPath(); | |
ctx.moveTo(164 + x, 125 + y); | |
ctx.bezierCurveTo(189.77 + x, 161.32 + y, 206.77 + x, 222.68 + y, 181 + x, 259 + y); | |
ctx.bezierCurveTo(155.23 + x, 295.32 + y, 77.77 + x, 296.32 + y, 52 + x, 260 + y); | |
ctx.bezierCurveTo(26.23 + x, 223.68 + y, 36.21 + x, 158.10 + y, 66 + x, 125 + y); | |
ctx.bezierCurveTo(93 + x, 95 + y, 138.23 + x, 88.68 + y, 164 + x, 125 + y); | |
ctx.closePath(); | |
ctx.fill(); | |
ctx.fillStyle = "#f8d5a1"; | |
ctx.beginPath(); | |
ctx.moveTo(48 + x, 169.50 + y); | |
ctx.bezierCurveTo(52.06 + x, 174.75 + y, 44.75 + x, 178 + y, 45.82 + x, 190.33 + y); | |
ctx.bezierCurveTo(46.70 + x, 200.46 + y, 38.15 + x, 193.63 + y, 33.92 + x, 188.06 + y); | |
ctx.bezierCurveTo(29.69 + x, 182.48 + y, 29.69 + x, 173.45 + y, 33.92 + x, 167.88 + y); | |
ctx.bezierCurveTo(38.15 + x, 162.30 + y, 43.94 + x, 164.25 + y, 48 + x, 169.50 + y); | |
ctx.closePath(); | |
ctx.fill(); | |
ctx.beginPath(); | |
ctx.moveTo(184.25 + x, 209 + y); | |
ctx.bezierCurveTo(179.33 + x, 204.25 + y, 187.98 + x, 205.19 + y, 186.25 + x, 190.50 + y); | |
ctx.bezierCurveTo(184.87 + x, 178.73 + y, 189.51 + x, 181.16 + y, 193.03 + x, 186.04 + y); | |
ctx.bezierCurveTo(196.56 + x, 190.93 + y, 197.10 + x, 199.29 + y, 194.24 + x, 204.71 + y); | |
ctx.bezierCurveTo(191.38 + x, 210.14 + y, 189.17 + x, 213.75 + y, 184.25 + x, 209 + y); | |
ctx.closePath(); | |
ctx.fill(); | |
ctx.fillStyle = "white"; | |
ctx.strokeStyle = "black"; | |
ctx.fillStyle = "#ffd5a2"; | |
ctx.beginPath(); | |
ctx.moveTo(142.82 + x, 38.47 + y); | |
ctx.bezierCurveTo(160.39 + x, 56.44 + y, 160.39 + x, 85.56 + y, 142.82 + x, 103.53 + y); | |
ctx.bezierCurveTo(125.25 + x, 121.49 + y, 96.75 + x, 121.49 + y, 79.18 + x, 103.53 + y); | |
ctx.bezierCurveTo(61.61 + x, 85.56 + y, 61.61 + x, 56.44 + y, 79.18 + x, 38.47 + y); | |
ctx.bezierCurveTo(96.75 + x, 20.51 + y, 125.25 + x, 20.51 + y, 142.82 + x, 38.47 + y); | |
ctx.closePath(); | |
ctx.fill(); | |
ctx.fillStyle = "white"; | |
ctx.strokeStyle = "black"; | |
ctx.strokeStyle = "#000000"; | |
ctx.lineWidth = "1.000000"; | |
ctx.lineJoin = "miter"; | |
ctx.beginPath(); | |
ctx.moveTo(-122 + x, -146 + y); | |
ctx.bezierCurveTo( - 122 + x, -146 + y, -122 + x, -146 + y, -122 + x, -146 + y); | |
ctx.bezierCurveTo( - 122 + x, -146 + y, -122 + x, -146 + y, -122 + x, -146 + y); | |
ctx.bezierCurveTo( - 122 + x, -146 + y, -122 + x, -146 + y, -122 + x, -146 + y); | |
ctx.bezierCurveTo( - 122 + x, -146 + y, -122 + x, -146 + y, -122 + x, -146 + y); | |
ctx.closePath(); | |
ctx.stroke(); | |
ctx.fillStyle = "#4f4f4f"; | |
ctx.lineWidth = "1"; | |
ctx.lineJoin = "round"; | |
ctx.beginPath(); | |
ctx.moveTo(100.03 + x, 54.81 + y); | |
ctx.bezierCurveTo(101.59 + x, 56.42 + y, 101.59 + x, 59.03 + y, 100.03 + x, 60.64 + y); | |
ctx.bezierCurveTo(98.47 + x, 62.25 + y, 95.93 + x, 62.25 + y, 94.37 + x, 60.64 + y); | |
ctx.bezierCurveTo(92.81 + x, 59.03 + y, 92.81 + x, 56.42 + y, 94.37 + x, 54.81 + y); | |
ctx.bezierCurveTo(95.93 + x, 53.20 + y, 98.47 + x, 53.20 + y, 100.03 + x, 54.81 + y); | |
ctx.closePath(); | |
ctx.fill(); | |
ctx.beginPath(); | |
ctx.moveTo(128.83 + x, 54.81 + y); | |
ctx.bezierCurveTo(130.39 + x, 56.42 + y, 130.39 + x, 59.03 + y, 128.83 + x, 60.64 + y); | |
ctx.bezierCurveTo(127.27 + x, 62.25 + y, 124.73 + x, 62.25 + y, 123.17 + x, 60.64 + y); | |
ctx.bezierCurveTo(121.61 + x, 59.03 + y, 121.61 + x, 56.42 + y, 123.17 + x, 54.81 + y); | |
ctx.bezierCurveTo(124.73 + x, 53.20 + y, 127.27 + x, 53.20 + y, 128.83 + x, 54.81 + y); | |
ctx.closePath(); | |
ctx.fill(); | |
ctx.fillStyle = "#ffffff"; | |
ctx.beginPath(); | |
ctx.moveTo(135.06 + x, 89.53 + y); | |
ctx.bezierCurveTo(142.85 + x, 107.86 + y, 130.06 + x, 138.27 + y, 123.51 + x, 157.06 + y); | |
ctx.bezierCurveTo(110.97 + x, 192.98 + y, 111.61 + x, 192.98 + y, 95.27 + x, 157.06 + y); | |
ctx.bezierCurveTo(87.02 + x, 138.91 + y, 77.83 + x, 108.48 + y, 85.62 + x, 90.14 + y); | |
ctx.bezierCurveTo(93.42 + x, 71.81 + y, 127.26 + x, 71.19 + y, 135.06 + x, 89.53 + y); | |
ctx.closePath(); | |
ctx.fill(); | |
ctx.fillStyle = "#4f4f4f"; | |
ctx.beginPath(); | |
ctx.moveTo(117.93 + x, 97.68 + y); | |
ctx.bezierCurveTo(122.03 + x, 95.92 + y, 122.03 + x, 93.08 + y, 117.93 + x, 91.32 + y); | |
ctx.bezierCurveTo(113.82 + x, 89.56 + y, 107.18 + x, 89.56 + y, 103.07 + x, 91.32 + y); | |
ctx.bezierCurveTo(98.97 + x, 93.08 + y, 98.97 + x, 95.92 + y, 103.07 + x, 97.68 + y); | |
ctx.bezierCurveTo(107.18 + x, 99.44 + y, 113.82 + x, 99.44 + y, 117.93 + x, 97.68 + y); | |
ctx.closePath(); | |
ctx.fill(); | |
ctx.fillStyle = "white"; | |
ctx.strokeStyle = "black"; | |
ctx.fillStyle = "#dc381b"; | |
ctx.beginPath(); | |
ctx.moveTo(127.25 + x, 12.09 + y); | |
ctx.bezierCurveTo(146.48 + x, 27.35 + y, 158.99 + x, 59.74 + y, 147 + x, 52.50 + y); | |
ctx.bezierCurveTo(123 + x, 38 + y, 92 + x, 40 + y, 72.50 + x, 54.50 + y); | |
ctx.bezierCurveTo(65.64 + x, 59.60 + y, 77 + x, 29.50 + y, 89.50 + x, 16 + y); | |
ctx.bezierCurveTo(103.44 + x, 0.94 + y, 109.50 + x, -2 + y, 127.25 + x, 12.09 + y); | |
ctx.closePath(); | |
ctx.fill(); | |
} | |
function animate() { | |
ctx.clearRect(0, 0, w, h); | |
drawSanta((w/2) - 120, (h/2) - 150); | |
for(var i in flakes) { | |
var f = flakes[i]; | |
f.y += gravity; | |
if(f.y > h) { | |
f.y = -10; | |
f.x = Math.random() * w; | |
} | |
drawFlake(f.x, f.y); | |
} | |
timer = window.setTimeout(animate, 20); | |
} | |
init(); | |
return false; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment