用html语言制作表白动画,HTML5 Canvas程序员经典爱情表白动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var $window = $(window), gardenCtx, gardenCanvas, $garden, garden;

var clientWidth = $(window).width();

var clientHeight = $(window).height();

$(function () {

// setup garden

$loveHeart = $("#loveHeart");

var offsetX = $loveHeart.width() / 2;

var offsetY = $loveHeart.height() / 2 - 55;

$garden = $("#garden");

gardenCanvas = $garden[0];

gardenCanvas.width = $("#loveHeart").width();

gardenCanvas.height = $("#loveHeart").height()

gardenCtx = gardenCanvas.getContext("2d");

gardenCtx.globalCompositeOperation = "lighter";

garden = new Garden(gardenCtx, gardenCanvas);

$("#content").css("width", $loveHeart.width() + $("#code").width());

$("#content").css("height", Math.max($loveHeart.height(), $("#code").height()));

$("#content").css("margin-top", Math.max(($window.height() - $("#content").height()) / 2, 10));

$("#content").css("margin-left", Math.max(($window.width() - $("#content").width()) / 2, 10));

// renderLoop

setInterval(function () {

garden.render();

}, Garden.options.growSpeed);

});

$(window).resize(function() {

var newWidth = $(window).width();

var newHeight = $(window).height();

});

function getHeartPoint(angle) {

var t = angle / Math.PI;

var x = 19.5 * (16 * Math.pow(Math.sin(t), 3));

var y = - 20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));

return new Array(offsetX + x, offsetY + y);

}

function startHeartAnimation() {

var interval = 50;

var angle = 10;

var heart = new Array();

var animationTimer = setInterval(function () {

var bloom = getHeartPoint(angle);

var draw = true;

for (var i = 0; i < heart.length; i++) {

var p = heart[i];

var distance = Math.sqrt(Math.pow(p[0] - bloom[0], 2) + Math.pow(p[1] - bloom[1], 2));

if (distance < Garden.options.bloomRadius.max * 1.3) {

draw = false;

break;

}

}

if (draw) {

heart.push(bloom);

garden.createRandomBloom(bloom[0], bloom[1]);

}

if (angle >= 30) {

clearInterval(animationTimer);

showMessages();

} else {

angle += 0.2;

}

}, interval);

}

(function($) {

$.fn.typewriter = function() {

this.each(function() {

var $ele = $(this), str = $ele.html(), progress = 0;

$ele.html('');

var timer = setInterval(function() {

var current = str.substr(progress, 1);

if (current == '

progress = str.indexOf('>', progress) + 1;

} else {

progress++;

}

$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));

if (progress >= str.length) {

clearInterval(timer);

}

}, 75);

});

return this;

};

})(jQuery);

function timeElapse(date){

var current = Date();

var seconds = (Date.parse(current) - Date.parse(date)) / 1000;

var days = Math.floor(seconds / (3600 * 24));

seconds = seconds % (3600 * 24);

var hours = Math.floor(seconds / 3600);

if (hours < 10) {

hours = "0" + hours;

}

seconds = seconds % 3600;

var minutes = Math.floor(seconds / 60);

if (minutes < 10) {

minutes = "0" + minutes;

}

seconds = seconds % 60;

if (seconds < 10) {

seconds = "0" + seconds;

}

var result = "" + days + " days " + hours + " hours " + minutes + " minutes " + seconds + " seconds";

$("#elapseClock").html(result);

}

function showMessages() {

adjustWordsPosition();

$('#messages').fadeIn(5000, function() {

showLoveU();

});

}

function adjustWordsPosition() {

$('#words').css("position", "absolute");

$('#words').css("top", $("#garden").position().top + 95);

$('#words').css("left", $("#garden").position().left + 30);

}

function adjustCodePosition() {

$('#code').css("margin-top", ($("#garden").height() - $("#code").height()) / 2);

}

function showLoveU() {

$('#loveu').fadeIn(3000);

}

var offsetX = $("#loveHeart").width() / 2;

var offsetY = $("#loveHeart").height() / 2 - 55;

var together = new Date();

together.setFullYear(2014, 4, 1);

together.setHours(20);

together.setMinutes(0);

together.setSeconds(0);

together.setMilliseconds(0);

if (!document.createElement('canvas').getContext) {

var msg = document.createElement("div");

msg.id = "errorMsg";

msg.innerHTML = "Your browser doesn't support HTML5!
Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";

document.body.appendChild(msg);

$("#code").css("display", "none")

document.execCommand("stop");

} else {

setTimeout(function () {

startHeartAnimation();

}, 5000);

timeElapse(together);

setInterval(function () {

timeElapse(together);

}, 500);

adjustCodePosition();

$("#code").typewriter();

}