Приятный Новогодний снежок на HTML5 Canvas
Очень приятный, мягко падающий снежок для вашего сайта
Для начала посмотрите ДЕМО
Установка:
На страницах вашего сайта, где должен идти снежок, сразу после открывающего тега <body> вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<canvas></canvas> <script type="text/javascript"> var canvas = document.querySelector('canvas'); var w = canvas.width = window.innerWidth; var h = canvas.height = window.innerHeight; var ctx = canvas.getContext('2d'); function Snowflake(x, y, s) { this.x = x; this.y = y; this.s = s; this.snowFall = function () { ctx.beginPath(); ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; ctx.arc(this.x, this.y += this.s, this.s, 0, Math.PI * 2); ctx.fill(); if (this.y > w - this.s ) { this.y = Math.floor(Math.random() * -w); } } }; var flakes = []; for (var i = 0; i < 700; i++) { var x = Math.floor(Math.random() * w); var y = Math.floor(Math.random() * -w); var s = Math.floor(Math.random() * 4); flakes[i] = new Snowflake(x, y, s); }; function update() { requestAnimationFrame(update); ctx.clearRect(0, 0, w, h); for (var i = 0; i < flakes.length; i++) { flakes[i].snowFall(); } }; update(); </script> |
