canvas实现爱心和彩虹雨的效果
发布时间：2020-06-03 编辑：jiaochengji.com
教程集为您提供canvas实现爱心和彩虹雨的效果等资源，欢迎您收藏本站，我们将为您提供最新的canvas实现爱心和彩虹雨的效果资源
本文主要介绍了canvas实现爱心和彩虹雨效果的实例，具有很好的参考价值。下面一起来看下吧
效果图：
代码如下：
<!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>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注教程集！
相关推荐：
在canvas上实现元素图片镜像翻转动画效果的方法
HTML5 canvas绘制五角星的方法
以上就是canvas实现爱心和彩虹雨的效果的详细内容，更多请关注教程集其它相关文章！
您可能感兴趣的文章：
canvas实现爱心和彩虹雨的效果
h5实现放大镜效果的代码
关于html5 canvas 微信海报的分享介绍
canvas实现动态小球重叠的效果代码
HTML5 Canvas实现烟花绽放的特效
photoshop设计霓虹字灯牌效果制作教程
photoshop设计一个扁平化风格的天气主题图标制作教程
photoshop设计一个扁平化风格彩虹图标制作教程
利用SurfaceView实现下雨与下雪动画的效果
html5和js绘制图片到canvas的方法
[关闭]