html--心花怒放

代码

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Canvas 绘制一个❤</title>
    <link rel="shortcut icon" href="../../assets/images/icon/favicon.ico" type="image/x-icon">
    <style>
        html,
        body {
            height: 100%;
            padding: 0;
            margin: 0;
        }
 
        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
 
<body>
    <canvas id="pinkboard">
        Canvas Not Support
    </canvas>
    <script>
        /*
     * Settings
     */
        var settings = {
            particles: {
                length: 500, // maximum amount of particles
                duration: 2, // particle duration in sec
                velocity: 100, // particle velocity in pixels/sec
                effect: -0.75, // play with this for a nice effect
                size: 30, // particle size in pixels
            },
        };
 
        /*
         * RequestAnimationFrame polyfill by Erik M?ller
         */
        (function () {
            var b = 0; var c = ["ms", "moz", "webkit", "o"];
            for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {
                window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"];
                window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"]
            } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } }
            if (!window.cancelAnimationFrame) {
                window.cancelAnimationFrame = function (d) {
                    clearTimeout(d)
                }
            }
        }()
        );
 
        /*
         * Point class
         */
        var Point = (function () {
            function Point(x, y) {
                this.x = (typeof x !== 'undefined') ? x : 0;
                this.y = (typeof y !== 'undefined') ? y : 0;
            }
            Point.prototype.clone = function () {
                return new Point(this.x, this.y);
            };
            Point.prototype.length = function (length) {
                if (typeof length == 'undefined')
                    return Math.sqrt(this.x * this.x + this.y * this.y);
                this.normalize();
                this.x *= length;
                this.y *= length;
                return this;
            };
            Point.prototype.normalize = function () {
                var length = this.length();
                this.x /= length;
                this.y /= length;
                return this;
            };
            return Point;
        })();
 
        /*
         * Particle class
         */
        var Particle = (function () {
            function Particle() {
                this.position = new Point();
                this.velocity = new Point();
                this.acceleration = new Point();
                this.age = 0;
            }
            Particle.prototype.initialize = function (x, y, dx, dy) {
                this.position.x = x;
                this.position.y = y;
                this.velocity.x = dx;
                this.velocity.y = dy;
                this.acceleration.x = dx * settings.particles.effect;
                this.acceleration.y = dy * settings.particles.effect;
                this.age = 0;
            };
            Particle.prototype.update = function (deltaTime) {
                this.position.x += this.velocity.x * deltaTime;
                this.position.y += this.velocity.y * deltaTime;
                this.velocity.x += this.acceleration.x * deltaTime;
                this.velocity.y += this.acceleration.y * deltaTime;
                this.age += deltaTime;
            };
            Particle.prototype.draw = function (context, image) {
                function ease(t) {
                    return (--t) * t * t + 1;
                }
                var size = image.width * ease(this.age / settings.particles.duration);
                context.globalAlpha = 1 - this.age / settings.particles.duration;
                context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
            };
            return Particle;
        })();
 
        /*
         * ParticlePool class
         */
        var ParticlePool = (function () {
            var particles,
                firstActive = 0,
                firstFree = 0,
                duration = settings.particles.duration;
 
            function ParticlePool(length) {
                // create and populate particle pool
                particles = new Array(length);
                for (var i = 0; i < particles.length; i++)
                    particles[i] = new Particle();
            }
            ParticlePool.prototype.add = function (x, y, dx, dy) {
                particles[firstFree].initialize(x, y, dx, dy);
 
                // handle circular queue
                firstFree++;
                if (firstFree == particles.length) firstFree = 0;
                if (firstActive == firstFree) firstActive++;
                if (firstActive == particles.length) firstActive = 0;
            };
            ParticlePool.prototype.update = function (deltaTime) {
                var i;
 
                // update active particles
                if (firstActive < firstFree) {
                    for (i = firstActive; i < firstFree; i++)
                        particles[i].update(deltaTime);
                }
                if (firstFree < firstActive) {
                    for (i = firstActive; i < particles.length; i++)
                        particles[i].update(deltaTime);
                    for (i = 0; i < firstFree; i++)
                        particles[i].update(deltaTime);
                }
 
                // remove inactive particles
                while (particles[firstActive].age >= duration && firstActive != firstFree) {
                    firstActive++;
                    if (firstActive == particles.length) firstActive = 0;
                }
 
 
            };
            ParticlePool.prototype.draw = function (context, image) {
                // draw active particles
                if (firstActive < firstFree) {
                    for (i = firstActive; i < firstFree; i++)
                        particles[i].draw(context, image);
                }
                if (firstFree < firstActive) {
                    for (i = firstActive; i < particles.length; i++)
                        particles[i].draw(context, image);
                    for (i = 0; i < firstFree; i++)
                        particles[i].draw(context, image);
                }
            };
            return ParticlePool;
        })();
 
        /*
         * Putting it all together
         */
        (function (canvas) {
            var context = canvas.getContext('2d'),
                particles = new ParticlePool(settings.particles.length),
                particleRate = settings.particles.length / settings.particles.duration, // particles/sec
                time;
 
            // get point on heart with -PI <= t <= PI
            function pointOnHeart(t) {
                return new Point(
                    160 * Math.pow(Math.sin(t), 3),
                    130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
                );
            }
 
            // creating the particle image using a dummy canvas
            var image = (function () {
                var canvas = document.createElement('canvas'),
                    context = canvas.getContext('2d');
                canvas.width = settings.particles.size;
                canvas.height = settings.particles.size;
                // helper function to create the path
                function to(t) {
                    var point = pointOnHeart(t);
                    point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
                    point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
                    return point;
                }
                // create the path
                context.beginPath();
                var t = -Math.PI;
                var point = to(t);
                context.moveTo(point.x, point.y);
                while (t < Math.PI) {
                    t += 0.01; // baby steps!
                    point = to(t);
                    context.lineTo(point.x, point.y);
                }
                context.closePath();
                // create the fill
                context.fillStyle = '#ea80b0';
                context.fill();
                // create the image
                var image = new Image();
                image.src = canvas.toDataURL();
                return image;
            })();
 
            // render that thing!
            function render() {
                // next animation frame
                requestAnimationFrame(render);
 
                // update time
                var newTime = new Date().getTime() / 1000,
                    deltaTime = newTime - (time || newTime);
                time = newTime;
 
                // clear canvas
                context.clearRect(0, 0, canvas.width, canvas.height);
 
                // create new particles
                var amount = particleRate * deltaTime;
                for (var i = 0; i < amount; i++) {
                    var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
                    var dir = pos.clone().length(settings.particles.velocity);
                    particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
                }
 
                // update and draw particles
                particles.update(deltaTime);
                particles.draw(context, image);
            }
 
            // handle (re-)sizing of the canvas
            function onResize() {
                canvas.width = canvas.clientWidth;
                canvas.height = canvas.clientHeight;
            }
            window.onresize = onResize;
 
            // delay rendering bootstrap
            setTimeout(function () {
                onResize();
                render();
            }, 10);
        })(document.getElementById('pinkboard'));
    </script>
</body>
 
</html>复制

在这里插入图片描述

html--心花怒放

代码

评论回复功能代码js html css

js 走马灯效果无缝不断实现

JQuery的基础笔记

jQuery 判断元素上是否绑定了某个事件

jQuery select获取选中的值资料记录，零基础开始学web前端开发

JQuery文档处理(1)，CSS字体样式值

jQuery

jQuery实现富文本编辑器

jQuery select获取选中的值资料记录，自我突破

jQuery(二)

前端哥

python闭包实现斐波那契

python解析cookie

python爬取tiktokseller center页面大屏数据

python爬取tiktok视频

评论回复功能代码js html css

js 走马灯效果无缝不断实现

Select下拉框支持搜索，jq插件，使用超级简单！

JQuery的基础笔记

【JavaScript&&jquery】账号登录与短信验证码登录切换

jQuery 判断元素上是否绑定了某个事件

1
js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000

2
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000

3
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

4
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

5
移动端css布局大全

2024-02-06 15:02:421000

6
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

7
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

8
vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999

9
echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999

10
jQuery事件处理

2024-03-12 01:03:32999

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Canvas 绘制一个❤</title>
	<link rel="shortcut icon" href="../../assets/images/icon/favicon.ico" type="image/x-icon">
	<style>
	html,
	body {
	height: 100%;
	padding: 0;
	margin: 0;
	}

	canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>

	<body>
	<canvas id="pinkboard">
	Canvas Not Support
	</canvas>
	<script>
	/*
	* Settings
	*/
	var settings = {
	particles: {
	length: 500, // maximum amount of particles
	duration: 2, // particle duration in sec
	velocity: 100, // particle velocity in pixels/sec
	effect: -0.75, // play with this for a nice effect
	size: 30, // particle size in pixels
	},
	};

	/*
	* RequestAnimationFrame polyfill by Erik M?ller
	*/
	(function () {
	var b = 0; var c = ["ms", "moz", "webkit", "o"];
	for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {
	window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"];
	window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] \|\| window[c[a] + "CancelRequestAnimationFrame"]
	} if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } }
	if (!window.cancelAnimationFrame) {
	window.cancelAnimationFrame = function (d) {
	clearTimeout(d)
	}
	}
	}()
	);

	/*
	* Point class
	*/
	var Point = (function () {
	function Point(x, y) {
	this.x = (typeof x !== 'undefined') ? x : 0;
	this.y = (typeof y !== 'undefined') ? y : 0;
	}
	Point.prototype.clone = function () {
	return new Point(this.x, this.y);
	};
	Point.prototype.length = function (length) {
	if (typeof length == 'undefined')
	return Math.sqrt(this.x * this.x + this.y * this.y);
	this.normalize();
	this.x *= length;
	this.y *= length;
	return this;
	};
	Point.prototype.normalize = function () {
	var length = this.length();
	this.x /= length;
	this.y /= length;
	return this;
	};
	return Point;
	})();

	/*
	* Particle class
	*/
	var Particle = (function () {
	function Particle() {
	this.position = new Point();
	this.velocity = new Point();
	this.acceleration = new Point();
	this.age = 0;
	}
	Particle.prototype.initialize = function (x, y, dx, dy) {
	this.position.x = x;
	this.position.y = y;
	this.velocity.x = dx;
	this.velocity.y = dy;
	this.acceleration.x = dx * settings.particles.effect;
	this.acceleration.y = dy * settings.particles.effect;
	this.age = 0;
	};
	Particle.prototype.update = function (deltaTime) {
	this.position.x += this.velocity.x * deltaTime;
	this.position.y += this.velocity.y * deltaTime;
	this.velocity.x += this.acceleration.x * deltaTime;
	this.velocity.y += this.acceleration.y * deltaTime;
	this.age += deltaTime;
	};
	Particle.prototype.draw = function (context, image) {
	function ease(t) {
	return (--t) * t * t + 1;
	}
	var size = image.width * ease(this.age / settings.particles.duration);
	context.globalAlpha = 1 - this.age / settings.particles.duration;
	context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
	};
	return Particle;
	})();

	/*
	* ParticlePool class
	*/
	var ParticlePool = (function () {
	var particles,
	firstActive = 0,
	firstFree = 0,
	duration = settings.particles.duration;

	function ParticlePool(length) {
	// create and populate particle pool
	particles = new Array(length);
	for (var i = 0; i < particles.length; i++)
	particles[i] = new Particle();
	}
	ParticlePool.prototype.add = function (x, y, dx, dy) {
	particles[firstFree].initialize(x, y, dx, dy);

	// handle circular queue
	firstFree++;
	if (firstFree == particles.length) firstFree = 0;
	if (firstActive == firstFree) firstActive++;
	if (firstActive == particles.length) firstActive = 0;
	};
	ParticlePool.prototype.update = function (deltaTime) {
	var i;

	// update active particles
	if (firstActive < firstFree) {
	for (i = firstActive; i < firstFree; i++)
	particles[i].update(deltaTime);
	}
	if (firstFree < firstActive) {
	for (i = firstActive; i < particles.length; i++)
	particles[i].update(deltaTime);
	for (i = 0; i < firstFree; i++)
	particles[i].update(deltaTime);
	}

	// remove inactive particles
	while (particles[firstActive].age >= duration && firstActive != firstFree) {
	firstActive++;
	if (firstActive == particles.length) firstActive = 0;
	}


	};
	ParticlePool.prototype.draw = function (context, image) {
	// draw active particles
	if (firstActive < firstFree) {
	for (i = firstActive; i < firstFree; i++)
	particles[i].draw(context, image);
	}
	if (firstFree < firstActive) {
	for (i = firstActive; i < particles.length; i++)
	particles[i].draw(context, image);
	for (i = 0; i < firstFree; i++)
	particles[i].draw(context, image);
	}
	};
	return ParticlePool;
	})();

	/*
	* Putting it all together
	*/
	(function (canvas) {
	var context = canvas.getContext('2d'),
	particles = new ParticlePool(settings.particles.length),
	particleRate = settings.particles.length / settings.particles.duration, // particles/sec
	time;

	// get point on heart with -PI <= t <= PI
	function pointOnHeart(t) {
	return new Point(
	160 * Math.pow(Math.sin(t), 3),
	130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
	);
	}

	// creating the particle image using a dummy canvas
	var image = (function () {
	var canvas = document.createElement('canvas'),
	context = canvas.getContext('2d');
	canvas.width = settings.particles.size;
	canvas.height = settings.particles.size;
	// helper function to create the path
	function to(t) {
	var point = pointOnHeart(t);
	point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
	point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
	return point;
	}
	// create the path
	context.beginPath();
	var t = -Math.PI;
	var point = to(t);
	context.moveTo(point.x, point.y);
	while (t < Math.PI) {
	t += 0.01; // baby steps!
	point = to(t);
	context.lineTo(point.x, point.y);
	}
	context.closePath();
	// create the fill
	context.fillStyle = '#ea80b0';
	context.fill();
	// create the image
	var image = new Image();
	image.src = canvas.toDataURL();
	return image;
	})();

	// render that thing!
	function render() {
	// next animation frame
	requestAnimationFrame(render);

	// update time
	var newTime = new Date().getTime() / 1000,
	deltaTime = newTime - (time \|\| newTime);
	time = newTime;

	// clear canvas
	context.clearRect(0, 0, canvas.width, canvas.height);

	// create new particles
	var amount = particleRate * deltaTime;
	for (var i = 0; i < amount; i++) {
	var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
	var dir = pos.clone().length(settings.particles.velocity);
	particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
	}

	// update and draw particles
	particles.update(deltaTime);
	particles.draw(context, image);
	}

	// handle (re-)sizing of the canvas
	function onResize() {
	canvas.width = canvas.clientWidth;
	canvas.height = canvas.clientHeight;
	}
	window.onresize = onResize;

	// delay rendering bootstrap
	setTimeout(function () {
	onResize();
	render();
	}, 10);
	})(document.getElementById('pinkboard'));
	</script>
	</body>

	</html>

html--心花怒放

代码

微信扫一扫：分享