<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>2016/02/20</title>
</head>
<body>
<div id="mainDiv">
<div id = "content">
<div id = "code">
<span class="comments">/**</span></br>
<span class="space"/><span class="comments">*2013-09-21</span><br>
<span class="space"/><span class="comments">*2016-02-20.</span><br>
<span class="space"/><span class="comments">*/</span><br>
Boy name = <span class="keyword">MR</span>Liu<br>
Girl name = <span class="keyword">MRS</span>Li<br>
<span class="comments">//Fall in love river.</span><br>
The boy loves the girl;<br>
<span class="comments">//They love each other.</span><br>
The girl loves the boy;<br>
<span class="comments">//As times go on.</span><br>
The boy can not be separated the girl;<br>
<span class="comments">//At the same time.</span><br>
The girl can not be separated the boy too;<br>
<span class="comments">//Both wind and snow all over the sky.</span><br>
<span class="comments">//Whether on foot or 5 kilometers.</span><br>
<span class="keyword">The boy </span>very <span class="keyword">happy</span>;<br>
<span class="keyword">The girl </span>also very <span class="keyword">happy</span>;<br>
<span class="placeholder"/><span class="comments">//Whether it is right now</span><br>
<span class="placeholder"/><span class="comments">//Still in the distant future</span><br>
<span class="placeholder"/>The girl has but one dream;<br>
<span class="comments">// The girl wants the girl could well have been happy.</span><br>
<br>
<br>
I want to say:<br>
Baby,i love you forever;<br>
</div>
<div id = "loveHeart">
<canvas id = "garden"></canvas>
<div id = "words">
<div id = "messages">
Darling,this is our love time.
<div id = "elapseClock"></div>
</div>
<div id = "loveu">
love you forever.<br>
<div id = "signature">-yours lin</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var offsetX = $("#loveHeart").width();
var offsetY = $("#loveHeart").height();
var together = new Date();
together.setFullYear(2013,09 ,21);
together.setHours(20);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);
if(!document.createElement(‘canvas‘).getContext){
var msg = document.createElement("div");
var id = "errorMsg";
msg.innerHTML = "Your browser doesn‘t support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
document.body.appendChild(msg);
$("#code").css("display","none");
$("#copyright").css("position","absolute");
$("copyright").css("bottom","10px");
document.execCommand("stop");
}else{
setTimeout(function(){
startHeartAnimation();
},5000);
timeElapse(together);
setInterval(function(){
timeElapse(together);
},500);
adjustCodePosition();
$("#code").typewrier();
}
</script>
</body>
</html>
/***********************garden.js*******************/
function Vector(x,y){
this.x = x;
this.y = y;
}
Vector.prototype = {
rotate:function(theta){
var x = this.x;
var y = this.y;
this.x = Math.cos(theta) * x - Math.sin(theta) * y;
this.y = Math.sin(theta) * x - Math.cos(theta) * y;
return this;
}
mult:function(f){
this.x *= f;
this.y *= f;
return this;
},
clone:function(){
return Vector(this.x,this.y);
},
length:function(){
return Math.sqrt(this.x * this.x + this.y * this.y);
},
subtract:function(v){
this.x -= v,x;
this.y -= v,y;
return this;
},
set:function(x,y){
this.x = x;
this.y = y;
return this;
}
};
function Petal(stretchA,stretchB,startAngle,angle,growFactor,bloom){
this.stretchA = stretchA;
this.stretchB = stretchB;
this.startAngle = startAngle;
this.angle = angle;
this.bloom = bloom;
this.growFactor = growFactor;
this.r = 1;
this.infinished = false;
}
Petal.prototype = {
draw:function(){
var ctx = this.bloom.garden.ctx;
var v1,v2,v3,v4;
v1 = new Vector(0,this.r).rotate(Garden.degrad(this.startAngle));
v2 = v1.clone().rotate(this.angle);
v3 = v1.clone().mult(this.stretchA);
v4 = v2.clone().mult(this.stretchB);
ctx.strokeStyle = this.bloom.c;
ctx.beginPath();
ctx.moveTo(v1.x,v1.y);
ctx.bezierCurveTo(v3.x,v3,y,v4.x,v4.y,v2.x,v2.y);
ctx.stroke();
},
render:function(){
if(this.r <= this.bloom.r){
this.r += this.growFactor;
this.draw();
}else{
this.isfinished = true;
}
}
}
function Bloom(p,r,c,pc,garden){
this.p = p;
this.r = r;
this.c = c;
this.pc = pc;
this.petals = [];
this.garden = garden;
this.init();
this.garden.addBloom(this);
}
Bloom.prototype = {
draw:function(){
var p,isfinished = true;
this.garden.ctx.save();
this.garden.ctx.translate(this.p.x,this.p.y);
for(var i = 0;i < this.petals.length;i++){
p = this.petals(i);
p.render();
isfinished *= p.isfinished;
}
this.garden.restore();
if(isfinished == true){
this.garden.removeBloom(this);
}
},
init:function(){
var angle = 360/this.pc;
var startAngle = Garden.randomInt(0,90);
for(var i = 0;i < this.pc;i++){
this.petals.push(
new Petal(Garden.random(Garden.options.petalStretch.min,Garden.options.petalStretch.max),
Garden.random(Garden.options.petalStretch.min,Garden.options.petalStretch.max),
startAngle + i * angle,angle,
Garden.random(Garden.options.petalStretch.min,garden.option.growFactor.max),this)
);
}
}
}
function Garden(ctx,element){
this.blooms = [];
this.element = element;
this.ctx = ctx;
}
Garden.prototype = {
render:function(){
for(var i = 0;i < this.blooms.length;i++){
this.blooms[i].draw();
}
},
addBloom:function(b){
this.blooms.push(b);
},
removeBloom:function(b){
var bloom;
for(var i = 0;i < this.blooms.length;i++){
bloom = this.blooms[i];
if(bloom == b){
this.blooms.splice(i,1);
return this;
}
}
},
createRandomBloom:function(x,y){
this.createBloom(x,y,Garden.randomInt(Garden.options.bloomRadius.min,Garden.options.bloomRadius.max),
Garden.randomrgba(Garden.options.color.rmin,Garden.options.color.rmax,Garden.options.color.gmin,
Garden.options.color.gmax,Garden.options.color.bmin,Garden.options.color.bmax,Garden.options.color.opacity),
Garden.randomInt(Garden.options.petalCount.min,Garden.options.petalCount.max));
},
createBloom:function(x,y,r,c,pc){
new Bloom(new Vector(x,y),r,c,pc,this);
},
clear:function(){
this.blooms = [];
this,ctx.clearRect(0,0,this.element.width,this.element.height);
}
}
Garden.options = {
petalCount:{
min:8,
max:15
},
petalStretch: {
min: 0.1,
max: 3
},
growFactor:{
min:0.1,
max:1
},
bloomRadius:{
min:8,
max:10
},
density:10,
growspeed:1000/60,
color:{
rmin:128,
rmax:255,
gmin:0,
gmax:128,
bmin:0,
bmax:128,
opacity:0.1
},
tanAngle:60
};
Garden.random = function(min,max){
return Math.random() * (max - min) + min;
};
Garden.randomInt = function(min,max){
return Math.floor(Math.random() + (max - min + 1)) + min;
};
Garden.circle = 2 * Math.PI;
Garden.degrad = function(angle){
return Garden.circle / 360 * angle;
};
Garden.raddeg = function(){
return angle / Garden.circle * 360;
};
Garden.rgba = function(r,g,b,a){
return ‘rgba(‘ + r + ‘,‘ + g + ‘,‘ + b + ‘,‘ + a + ‘)‘;
};
Garden.randomrgba = function(rmin,rmax,gmin,gmax,bmin,bmax,a){
var r = Math.round(Garden.random(rmin,rmax));
var g = Math.round(Garden.random(gmin.gmax));
var b = Math.round(Garden.random(bmin.bmax));
var limit = 5;
if(Math.abs(r - g) <= limit && Math.abs(g - b) <= limit && Math.abs(r-g) <= limit){
return Garden.rgba(rmin.rmax,gmin,gmax,bmin,bmax,a);
}else{
return Garden.rgba(r,g,b,a);
}
}