<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>2016/02/20</title>
<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 is separated the girl;<br>
<span class= "Comments" >//at the same time.</span><br>
The girl can is 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's right now</span><br>
<span class= "placeholder"/><span class= "comments" >//still in the distant future</span><br>
<span class= "placeholder"/>the girl have but one dream;<br>
<span class= "Comments" >//the girl wants the girl could well has been happy.</span><br>
<br>
<br>
I want to Say:<br>
Baby,i Love Forever;<br>
</div>
<div id = "Loveheart" >
<canvas id = "Garden" ></canvas>
<div id = "words" >
<div id = "Messages" >
Darling,this is we love time.
<div id = "Elapseclock" ></div>
</div>
<div id = "Loveu" >
Love 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>
/***********************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);
}
}
2016/02/20 Codes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
