爱心代码---

已于 2023-03-08 20:35:13 修改
阅读量2.3k 收藏 1
点赞数
分类专栏： 笔记 文章标签： javascript 前端 html
于 2022-11-15 16:45:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58414196/article/details/127868944
版权
本文介绍了如何使用HTML和JavaScript创建动态显示的爱心效果，详细解析了代码实现过程。
摘要由CSDN通过智能技术生成 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
    <TITLE> 李峋爱心代码 </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <style>
        html,
        body {
            height: 100%;
            padding: 0;
            margin: 0;
            background: #000;
        }
        
        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</HEAD>

<BODY>
    <canvas id="pinkboard"></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 (!windo
最低0.47元/天 解锁文章
keepRuning9
关注
专栏目录
【另外一款爱心——html实现（附源代码）】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
11-10 6万+
代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas爱心</title> <style> html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { position: absolute; width: 100%;
爱心代码c语言-爱心代码c语言源码.zip
05-16
爱心代码c语言-爱心代码c语言源码.zip爱心代码c语言-爱心代码c语言源码.zip爱心代码c语言-爱心代码c语言源码.zip爱心代码c语言-爱心代码c语言源码.zip爱心代码c语言-爱心代码c语言源码.zip爱心代码c语言-爱心代码...
爱心代码
u013780740的专栏
06-15 5908
#include #include #include #define I 20 //爱心的上半部分两个小半圆的半径 #define R 340 //爱心的下半部分圆弧曲线半径 int main() { FILE *fp; if((fp=fopen("爱心.txt","w"))==NULL) { printf("File open error!\n"); exit(0);
Python李峋同款跳动的爱心代码（付源码）
2401_86168842的博客
08-22 2760
在`__init__`函数中，首先定义了原始爱心坐标集合（`self._points`）、边缘扩散效果点坐标集合（`self._edge_diffusion_points`）、中心扩散效果点坐标集合（`self._center_diffusion_points`）以及每帧动态点坐标的集合（`self.all_points`）。在另一个函数`calc`中，定义了半径的缩放比例、光晕的半径和数量，并生成了一定量的光晕点并将其加入到`self.all_points`中。（无法解决，只能同意哦~）
C语言——爱心代码
Stewie Lee的博客
12-12 3万+
当然，你们的想象力不应至于此，还有许多的图形等待你的探索，更多图形等待组合，也可以更改每个区域的字符使图像更绚烂。
爱心代码（c语言）
weixin_74279469的博客
11-10 1万+
爱心代码（c语言）最简单的爱心代码，复制即可用
爱心代码大全
2301_76674526的博客
12-09 7261
while(1) //空格后面打印love，但是要注意love即使没打印完，也要换行。//形成一条color X的字符串，注意要用%x。原文链接：https://blog.csdn.net/weixin_58045538/article/details/127415337。) //kbhit()位于conio.h中，检测是否有键按下。i++) //爱心的中间部分的上部分。//定义变量x,y,a。
李峋同款爱心代码-爱心源码
12-14
第三种是"第3种python爱心代码---需要安装python"，这表明代码使用Python编程语言。Python中，可以使用字符串操作和循环结构生成爱心图案。例如，通过嵌套循环，我们可以控制打印不同形状的字符（如"*"）来形成一个...
爱心代码-使用Python实现的爱心代码.zip
03-10
在Python编程语言中，"爱心代码"通常是指利用字符或者字符串拼接生成一个形似爱心的图案。这种代码是初学者常用来练习控制流、字符串操作以及艺术输出的一个经典示例。下面，我们将深入探讨如何使用Python实现爱心...
表白特效-爱心代码-动态爱心树-音乐效果-动态文字
最新发布
10-14
表白特效-爱心代码-动态爱心树-音乐效果-动态文字+双击html就可看到效果
用C语言编写爱心
12-29
用C语言编写爱心，可以改变爱心的颜色
代码绘制的爱心表白
05-21
此代码支持修改，本页面充满浪漫，是表白的不二之选。
画爱心的代码
04-12
画一个爱心，有时候还是听偶意思的，所以没事干，自己写个玩玩，屌丝的一天就是这么过的
爱心代码（python）
weixin_65937824的博客
11-19 111
t.write('祝茂茂',align='center',font=('宋体','20')) #文字可以随意调整，slign是对齐方式,font是字体和字号。t.circle(100,180) #绘制直径为100，角度为180度的半圆。t.circle(100,180) #绘制直径为100，角度为180度的半圆。t.color('pink', 'pink') #画笔填充颜色。t.goto(-120, -120) #移动画笔到指定坐标。t.goto(120, -120) #移动画笔到指定坐标。
python 爱心代码
热门推荐
CSH__的博客
11-19 16万+
画爱心，画蝴蝶，python程序代码：heart.py。
觅心代码
qq_72488981的博客
09-13 364
我总是认为有过雨果的博爱，萧伯纳的智慧，罗曼·罗兰又把美说的那么清楚，人无论如何也不应该是那么愚昧的了--------王小波。
编写爱心代码
Yadori的博客
12-16 7343
# -*- coding: utf-8 -*- from turtle import * def curvemove(): for i in range(200): right(1) forward(1) color('red','pink') begin_fill() left(140) forward(111.65) curvemove() left(120) curvemove() forward(111.65) end_fill() done(...
爱心代码来啦
weixin_46551628的博客
11-09 4031
最佳表白神码来啦，这就是所谓的理科生的烂漫嘛？ 现在很火的爱心代码 想要的小伙伴自取喔！！！给个小心心支持 import random from math import sin, cos, pi, log from tkinter import * CANVAS_WIDTH = 660 # 画布的宽 CANVAS_HEIGHT = 500 # 画布的高 CANVAS_CENTER_X = CANVAS_WIDTH / 2 # 画布中心的X轴坐标 CANVAS_
爱心❤代码
m0_58180186的博客
12-10 390
爱心❤代码
李峋爱心代码html
09-20
``` <!DOCTYPE html> <html> <head> <title></title> </head> <style> * { padding: 0; margin: 0; } html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { position: absolute; width: 100%; height: 100%; } .aa { position: fixed; left: 50%; bottom: 10px; color: #ccc; } </style> <body> <canvas id="pinkboard"></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> ``` ![示例图片](https://devbit-static.oss-cn-beijing.aliyuncs.com/devbit-static/img/heart.png)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值