效果图:
代码如下:
代码如下
<script>
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
canvasW = canvas.width = window.innerWidth,
canvasH = canvas.height = window.innerHeight,
canvasWHalf = canvasW / 2,
canvasHHalf = canvasH / 2,
xoff = canvasWHalf - 306,
yoff = 50,
bg = '00061a',
id = 0,
raindrops = [],
minSize = 1,
maxSize = 4,
minSpeed = 5,
maxSpeed = 20,
minHue = 0,
maxHue = 360,
maxAmount = 50;
function random(min, max) {
if (arguments.length <2) {
max=min;
min=0;
}
return Math.floor(Math.random() * (max - min) + min);
}
function hexToRGB(hex, opacity) {
varrgb='';
hex.match(/.{2}/g).forEach(function(n) {
rgb += (parseInt(n, 16)) + ',';
});
return 'rgba(' + rgb + opacity + ')';
}
function draw() {
// Heart
ctx.fillStyle=hexToRGB(bg, '0.1');
ctx.beginPath();
// Left half
ctx.moveTo(0, 0);
ctx.lineTo(canvasWHalf, 0);
ctx.lineTo(304 + xoff, 97 + yoff);
ctx.bezierCurveTo(282 + xoff, -5 + yoff, 80 + xoff, -6 + yoff, 76 + xoff, 165 + yoff);
ctx.bezierCurveTo(74 + xoff, 251 + yoff, 184 + xoff, 300 + yoff, 304 + xoff, 447 + yoff);
ctx.lineTo(canvasWHalf, canvasH);
ctx.lineTo(0, canvasH);
// Right half
ctx.moveTo(canvasW, 0);
ctx.lineTo(canvasWHalf, 0);
ctx.lineTo(304 + xoff, 97 + yoff);
ctx.bezierCurveTo(326 + xoff, 5 + yoff, 528 + xoff, 6 + yoff, 532 + xoff, 165 + yoff);
ctx.bezierCurveTo(534 + xoff, 251 + yoff, 424 + xoff, 300 + yoff, 304 + xoff, 447 + yoff);
ctx.lineTo(canvasWHalf, canvasH);
ctx.lineTo(canvasW, canvasH);
ctx.closePath();
ctx.fill();
// Raindrops
for (vari=1; i < id; i++) {
raindrops[i].fall();
};
}
varRaindrop=function() {
id++;
this.y=random(-canvasH);
this.x=random(canvasW);
this.size=random(minSize, maxSize);
this.speed=random(minSpeed, maxSpeed);
this.color='hsl('+ random(minHue, maxHue) + ',100%,55%)';
this.origColor= this.color;
this.id= id;
raindrops[id] = this;
};
Raindrop.prototype.fall=function() {
this.y += this.speed;
if (this.y >= canvasH) {
this.y = random(-canvasH);
this.x = random(canvasW);
}
ctx.save();
ctx.beginPath();
var gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
gradient.addColorStop(0, '#fff');
gradient.addColorStop(0.5, this.color);
gradient.addColorStop(1, hexToRGB(bg, 0));
ctx.rect(this.x, this.y, this.size, maxSpeed);
ctx.fillStyle = gradient;
ctx.fill();
ctx.closePath();
ctx.restore();
};
(function init() {
ctx.fillStyle = '#' + bg;
ctx.fillRect(0, 0, canvasW, canvasH);
for (var i = 0; i new Raindrop(); } }()); function animate() { draw(); window.requestAnimationFrame(animate); } window.requestAnimationFrame(animate); function mouseTrail(x, y) { ctx.save(); ctx.globalCompositeOperation='overlay'; ctx.fillStyle='rgba(255,255,255,0.1)'; ctx.arc(x, y, 50, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } window.addEventListener('mousemove', function(cursor) { mouseTrail(cursor.x, cursor.y); }); </script> http://m.bbyears.com/jiaocheng/130058.html