-
Notifications
You must be signed in to change notification settings - Fork 0
/
canvas-heart.html
130 lines (117 loc) · 6.81 KB
/
canvas-heart.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title></title>
<style>
canvas {
transform: translate3d(-50%, 0, 0) scale(0.5);
position: absolute;
/*top: 20px;*/
left: 50%;
}
body {
overflow: hidden;
margin: 0;
height: 100%;
background: #fff;
}
img {
height: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translate3d(-50%, 0, 0);
}
html {
height: 100%;
}
</style>
</head>
<body>
<!--<img src="img/love.jpg">-->
<canvas></canvas>
<script>
(function () {
var canvas = document.querySelector( "canvas" );
var gl = canvas.getContext( "2d" );
canvas.width = canvas.height = 500;
var left = [ [ 250 , 400 ] , [ 229.92100000000002 , 393.89070999999996 ] , [ 211.08399999999995 , 386.44167999999996 ] , [ 193.48900000000006 , 377.7711700000001 ] , [ 177.136 , 367.99744 ] , [ 162.02499999999998 , 357.23875000000004 ] , [ 148.15599999999995 , 345.61335999999994 ] , [ 135.52899999999994 , 333.2395299999999 ] , [ 124.14399999999998 , 320.23552 ] , [ 114.00099999999999 , 306.71959000000004 ] , [ 105.1 , 292.81 ] , [ 97.441 , 278.62501000000003 ] , [ 91.02399999999999 , 264.2828799999999 ] , [ 85.84899999999999 , 249.90187 ] , [ 81.916 , 235.60023999999993 ] , [ 79.225 , 221.49624999999995 ] , [ 77.77600000000001 , 207.70815999999996 ] , [ 77.569 , 194.35422999999992 ] , [ 78.60400000000001 , 181.55271999999988 ] , [ 80.88100000000003 , 169.4218899999999 ] , [ 84.40000000000003 , 158.0799999999999 ] , [ 89.16100000000006 , 147.64530999999988 ] , [ 95.16400000000009 , 138.2360799999999 ] , [ 102.40900000000009 , 129.9705699999999 ] , [ 110.89600000000013 , 122.96703999999991 ] , [ 120.62500000000017 , 117.34374999999993 ] , [ 131.59600000000017 , 113.21895999999994 ] , [ 143.8090000000002 , 110.71092999999996 ] , [ 157.26400000000024 , 109.93792 ] , [ 171.96100000000027 , 111.01819000000002 ] , [ 187.90000000000035 , 114.07000000000008 ] , [ 205.08100000000036 , 119.21161000000012 ] , [ 223.5040000000004 , 126.56128000000018 ] , [ 243.16900000000044 , 136.23727000000025 ] , [ 243.16900000000044 , 136.23727000000025 ] ];
var right = [ [ 256.83099999999956 , 398.1197300000001 ] , [ 276.4959999999996 , 391.5507200000002 ] , [ 294.91899999999964 , 383.68139000000014 ] , [ 312.0999999999997 , 374.6300000000002 ] , [ 328.03899999999965 , 364.5148100000001 ] , [ 342.73599999999976 , 353.4540800000002 ] , [ 356.1909999999998 , 341.5660700000002 ] , [ 368.4039999999998 , 328.9690400000002 ] , [ 379.3749999999999 , 315.7812500000002 ] , [ 389.10399999999987 , 302.1209600000002 ] , [ 397.5909999999999 , 288.10643000000016 ] , [ 404.83599999999996 , 273.8559200000002 ] , [ 410.83899999999994 , 259.48769000000016 ] , [ 415.6 , 245.12000000000018 ] , [ 419.1189999999999 , 230.87111000000016 ] , [ 421.396 , 216.85928000000013 ] , [ 422.43100000000004 , 203.20277000000013 ] , [ 422.22400000000005 , 190.01984000000013 ] , [ 420.77500000000015 , 177.4287500000001 ] , [ 418.08400000000006 , 165.5477600000001 ] , [ 414.1510000000001 , 154.49513000000007 ] , [ 408.97600000000006 , 144.38912000000005 ] , [ 402.55900000000014 , 135.34799000000007 ] , [ 394.90000000000015 , 127.49000000000005 ] , [ 385.9990000000001 , 120.93341000000002 ] , [ 375.856 , 115.79648 ] , [ 364.47099999999995 , 112.19747 ] , [ 351.844 , 110.25464 ] , [ 337.97499999999997 , 110.08624999999998 ] , [ 322.864 , 111.81055999999998 ] , [ 306.511 , 115.54583000000001 ] , [ 288.9159999999999 , 121.41031999999997 ] , [ 270.079 , 129.52228999999997 ] , [ 250 , 140 ] , [ 250 , 140 ] ];
var index = 0 , len = left.length;
var angle = Math.PI / 180;
var img = new Image();
img.src = "img/heart.png";
function setHeart( x , y , rotate , opacity , size ) {
gl.save();
gl.translate( x , y );
gl.rotate( angle * rotate );
gl.globalAlpha = opacity;
gl.drawImage( img , 0 , 0 , size || 20 , size || 20 );
gl.restore();
}
var hearts = [];
function makeHeart( x0 , y0 ) {
var rotate = 90 * Math.random() ,
opacity = 1;
setHeart( x0 , y0 , rotate , opacity );
var sum = Math.abs( x0 - 250 ) + Math.abs( y0 - 250 );
var dx = - (x0 - 250) / sum , dy = - (y0 - 250) / sum;
var vx = ( Math.random() * 4 ) * dx ,
vy = ( Math.random() * 4 ) * dy;
hearts.push( {
x : x0 ,
y : y0 ,
rotate : rotate ,
opacity : opacity ,
vx : vx ,
vy : vy ,
gx : - vx / 20 ,
gy : - vy / 20
} )
}
img.onload = function () {
var scale = document.body.offsetWidth / 500;
var dh = document.body.offsetHeight / 3;
dh = dh + ( scale - 1) * 250;
dh = dh - document.body.offsetWidth * 0.5;
canvas.style.transform = "translate3d(-50%,0,0) scale(" + scale + ")";
canvas.style.top = dh + "px";
if ( index < len ) {
makeHeart( left[ index ][ 0 ] , left[ index ][ 1 ] );
makeHeart( left[ index ][ 0 ] , left[ index ][ 1 ] );
makeHeart( right[ index ][ 0 ] , right[ index ][ 1 ] );
makeHeart( right[ index ][ 0 ] , right[ index ][ 1 ] );
index ++;
setTimeout( arguments.callee , 20 );
}
else {
// 开始散开的设计
(function () {
var live = hearts.length;
gl.clearRect( 0 , 0 , 500 , 500 );
for ( var i = 0; i < hearts.length; i ++ ) {
hearts[ i ].opacity -= 0.01;
if ( hearts[ i ].opacity >= 0 ) {
hearts[ i ].vx += hearts[ i ].gx;
hearts[ i ].vy += hearts[ i ].gy;
hearts[ i ].x += hearts[ i ].vx;
hearts[ i ].y += hearts[ i ].vy;
setHeart( hearts[ i ].x , hearts[ i ].y , hearts[ i ].rotate , hearts[ i ].opacity );
} else {
live --;
}
}
if ( live ) {
setTimeout( arguments.callee , 20 );
} else {
console.log( "end" );
}
})()
}
}
})();
</script>
</body>
</html>