1.实现构思

最开始想用缩小图片然后使用曲线的方式遍历循环形成爱心，实际测试下来，性能耗损太大，以至于实现难度更高，位置和速度不可控

思索良久后，还是决定用画布

Particle 和 ParticlePool 类定义了粒子和粒子池，用于绘制和管理粒子。

pointOnHeart 函数返回一个位于桃心曲线上的点，用来初始化粒子的位置。

然后使用 canvas 绘制小粒子创造一个形状为桃心的动态效果。

代码中 render 函数是主要的渲染函数，用于更新粒子状态、绘制粒子以及创建新的粒子。

最后通过延迟一段时间调用 onResize 函数，设置画布大小并开始渲染。

2.先确定页面的布局，分为左右布局

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
<div id="mainDiv">
	<div id="content">
		<div id="code">
			<span class="comments">人生至少该有一次</span><br />
			<span class="comments">为了某一个人而忘了自己</span><br />
			<span class="keyword">不求结果，不求同行，</span><br />
			<span class="keyword">不求曾经拥有，甚至不求你爱我，</span><br />
			<span class="keyword"/>只求在我最美的年华里</span><br />
			<span class="keyword"/>遇到你</span><br />
		</div>
		<div id="loveHeart">
			<canvas id="garden"></canvas>
			<div id="words">
				<div id="messages">
					亲爱的，这是我们相识的时光。
					<div id="elapseClock"></div>
				</div>
				<div id="loveu">
					爱你的。<br/>
					<div class="signature">- 侯先生</div>
				</div>
			</div>
		</div>
	</div>
</div>

3.确定板块样式

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
@font-face {
    font-family: digit;
    src: url('digital-7_mono.ttf') format("truetype");
}

body {
    margin: 0;
    padding: 0;
    background: #ffe;
    font-size: 12px;
    overflow: auto
}

#mainDiv {
    width: 100%;
    height: 100%
}

#loveHeart {
    float: left;
    width: 670px;
    height: 625px
}

#garden {
    width: 100%;
    height: 100%
}

#elapseClock {
    text-align: right;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px
}

#words {
    font-family: "sans-serif";
    width: 500px;
    font-size: 24px;
    color: #666
}

#messages {
    display: none
}

#elapseClock .digit {
    font-family: "digit";
    font-size: 36px
}

#loveu {
    padding: 5px;
    font-size: 22px;
    margin-top: 80px;
    margin-right: 120px;
    text-align: right;
    display: none
}

#loveu .signature {
    margin-top: 10px;
    font-size: 20px;
    font-style: italic
}

#clickSound {
    display: none
}

#code {
    float: left;
    width: 440px;
    height: 400px;
    color: #333;
    font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", "sans-serif";
    font-size: 16px;
    line-height: 35px;
}

#code .string {
    color: #2a36ff
}

#code .keyword {
    color: #7f0055;
    font-weight: bold
}

#code .placeholder {
    margin-left: 15px
}

#code .space {
    margin-left: 7px
}

#code .comments {
    color: #3f7f5f
}

#copyright {
    margin-top: 10px;
    text-align: center;
    width: 100%;
    color: #666
}

#errorMsg {
    width: 100%;
    text-align: center;
    font-size: 24px;
    position: absolute;
    top: 100px;
    left: 0
}

#copyright a {
    color: #666
}

4.实现爱心粒子逻辑

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201

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 new 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.isfinished = false;
    //this.tanAngleA = Garden.random(-Garden.degrad(Garden.options.tanAngle), Garden.degrad(Garden.options.tanAngle));
    //this.tanAngleB = Garden.random(-Garden.degrad(Garden.options.tanAngle), Garden.degrad(Garden.options.tanAngle));
}
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(Garden.degrad(this.angle));
    v3 = v1.clone().mult(this.stretchA); //.rotate(this.tanAngleA);
    v4 = v2.clone().mult(this.stretchB); //.rotate(this.tanAngleB);
    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; // / 10;
        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.ctx.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.growFactor.min, Garden.options.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 (angle) {
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(b - r) <= limit) {
    return Garden.rgba(rmin, rmax, gmin, gmax, bmin, bmax, a);
} else {
    return Garden.rgba(r, g, b, a);
}
};

5.构造画布大小和运动轨迹

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

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();
    if (newWidth != clientWidth && newHeight != clientHeight) {
        location.replace(location);
    }
});

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 = "<span class=\"digit\">" + days + "</span> days <span class=\"digit\">" + hours + "</span> hours <span class=\"digit\">" + minutes + "</span> minutes <span class=\"digit\">" + seconds + "</span> seconds"; 
	$("#elapseClock").html(result);
}

function showMessages() {
	adjustWordsPosition();
	$('#messages').fadeIn(5000, function() {
		showLoveU();
	});
}

function adjustWordsPosition() {
	$('#words').css("position", "absolute");
	$('#words').css("top", $("#garden").position().top + 195);
	$('#words').css("left", $("#garden").position().left + 70);
}

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

function showLoveU() {
	$('#loveu').fadeIn(3000);
}

6.效果展示

  • 请使用电脑端查看效果

爱心效果演示

/assets/heart.html