canvas实现爱心和彩虹雨效果
程序员文章站
2022-12-17 18:58:59
效果图：
代码如下：
效果图：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas"></canvas>
<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) {
var rgb = '';
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 (var i = 1; i < id; i++) {
raindrops[i].fall();
};
}
var raindrop = 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 < maxamount; 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>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
上一篇： 三星全新平板电脑曝光：2GB内存