源碼分享 HTML 愛心

lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<style>

html, body {

height: 100%;

padding: 0;

margin: 0;

background: #000;

}

canvas {

position: absolute;

width: 100%;

height: 100%;

}

</style>

</HEAD>

<BODY>

</style>

* 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

* 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>

天全網都在過雙十一，咱們輕松點聊個 5 分鐘的天，就說兩件事。

第一件事

說件最近發生的 「怪事」。

這幾天，Gitee 咨詢后臺有點熱鬧。除了一如既往的技術操作咨詢外，老有同學問個啥愛心代碼，求同款，搞得客服小姐姐都懵了，還以為又是哪個商家雙十一促銷做廣告，投放了 Gitee 詞條。在 Gitee 查了下，好家伙一連串愛心代碼、李峋同款的開源項目，這些都是個啥？

帶著好奇搜了搜，原來是最近由陳凱歌之子陳飛宇和青春疼痛文學女主代表張婧儀主演的熱播電視劇《點燃我，溫暖我》中的劇情。簡單說，陳飛宇飾演的角色「李峋」是個程序員，為女主用 C 語言寫了個愛心代碼，制造了小驚喜，誰說程序員不懂浪漫呢。這不僅點燃了女主的心，屏幕對面的大伙對「阿瑟」更上頭了。

題外話： 不過劇中似乎是在 Python 里寫的 C 語言？編劇們不太嚴謹且專業吧，有沒有實時追劇的小伙伴，你們發現 Bug 了嗎？

電視劇爆火，大家都在讓自己的程序員男朋友/女朋友寫個同款愛心代碼。沒程序員男朋友/女朋友的別擔心，別人都有愛心代碼了，咱們 Gitee 的開發者們也必須有，開源人不僅懂浪漫，還有共享精神。今天給大家分享個用 Python 寫的愛心代碼開源項目，如果感興趣或者想給自己的另一半制造小浪漫的同學可以自己上手試一試。

除了這個用 Python 寫的同款愛心代碼之外，Gitee 上還有許多采用其他語言（如 HTML）成功運行的愛心代碼，如果你認為自己寫的愛心更精美，你也可以去 Gitee 給 800萬開發者們展示你的項目。

項目作者： chnhjf
項目地址： https://gitee.com/chnhjf/love

操作步驟

步驟一： 確保你安裝了 Python 軟件，如 python3

步驟二： 安裝 PIP 包 tkinter

步驟三： 執行 python3 love.py

源代碼：

import random
from math import sin, cos, pi, log
from tkinter import *
import ctypes

user32 = ctypes.windll.user32
CANVAS_WIDTH = user32.GetSystemMetrics(0)  # 畫布的寬
CANVAS_HEIGHT = user32.GetSystemMetrics(1)  # 畫布的高
CANVAS_CENTER_X = CANVAS_WIDTH / 2  # 畫布中心的X軸坐標
CANVAS_CENTER_Y = CANVAS_HEIGHT / 2  # 畫布中心的Y軸坐標
IMAGE_ENLARGE = 11  # 放大比例
HEART_COLOR = "#ff2121"  # 心的顏色，這個是中國紅


def heart_function(t, shrink_ratio: float = IMAGE_ENLARGE):
    """
    “愛心函數生成器”
    :param shrink_ratio: 放大比例
    :param t: 參數
    :return: 坐標
    """
    # 基礎函數
    x = 16 * (sin(t) ** 3)
    y = -(13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t))

    # 放大
    x *= shrink_ratio
    y *= shrink_ratio

    # 移到畫布中央
    x += CANVAS_CENTER_X
    y += CANVAS_CENTER_Y

    return int(x), int(y)


def scatter_inside(x, y, beta=0.15):
    """
    隨機內部擴散
    :param x: 原x
    :param y: 原y
    :param beta: 強度
    :return: 新坐標
    """
    ratio_x = - beta * log(random.random())
    ratio_y = - beta * log(random.random())

    dx = ratio_x * (x - CANVAS_CENTER_X)
    dy = ratio_y * (y - CANVAS_CENTER_Y)

    return x - dx, y - dy


def shrink(x, y, ratio):
    """
    抖動
    :param x: 原x
    :param y: 原y
    :param ratio: 比例
    :return: 新坐標
    """
    force = -1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.6)  # 這個參數...
    dx = ratio * force * (x - CANVAS_CENTER_X)
    dy = ratio * force * (y - CANVAS_CENTER_Y)
    return x - dx, y - dy


def curve(p):
    """
    自定義曲線函數，調整跳動周期
    :param p: 參數
    :return: 正弦
    """
    # 可以嘗試換其他的動態函數，達到更有力量的效果（貝塞爾？）
    return 2 * (2 * sin(4 * p)) / (2 * pi)


class Heart:
    """
    愛心類
    """

    def __init__(self, generate_frame=20):
        self._points = set()  # 原始愛心坐標集合
        self._edge_diffusion_points = set()  # 邊緣擴散效果點坐標集合
        self._center_diffusion_points = set()  # 中心擴散效果點坐標集合
        self.all_points = {}  # 每幀動態點坐標
        self.build(2000)

        self.random_halo = 1000

        self.generate_frame = generate_frame
        for frame in range(generate_frame):
            self.calc(frame)

    def build(self, number):
        # 愛心
        for _ in range(number):
            t = random.uniform(0, 2 * pi)  # 隨機不到的地方造成愛心有缺口
            x, y = heart_function(t)
            self._points.add((x, y))

        # 愛心內擴散
        for _x, _y in list(self._points):
            for _ in range(3):
                x, y = scatter_inside(_x, _y, 0.05)
                self._edge_diffusion_points.add((x, y))

        # 愛心內再次擴散
        point_list = list(self._points)
        for _ in range(4000):
            x, y = random.choice(point_list)
            x, y = scatter_inside(x, y, 0.17)
            self._center_diffusion_points.add((x, y))

    @staticmethod
    def calc_position(x, y, ratio):
        # 調整縮放比例
        force = 1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.520)  # 魔法參數

        dx = ratio * force * (x - CANVAS_CENTER_X) + random.randint(-1, 1)
        dy = ratio * force * (y - CANVAS_CENTER_Y) + random.randint(-1, 1)

        return x - dx, y - dy

    def calc(self, generate_frame):
        ratio = 10 * curve(generate_frame / 10 * pi)  # 圓滑的周期的縮放比例

        halo_radius = int(4 + 6 * (1 + curve(generate_frame / 10 * pi)))
        halo_number = int(3000 + 4000 * abs(curve(generate_frame / 10 * pi) ** 2))

        all_points = []

        # 光環
        heart_halo_point = set()  # 光環的點坐標集合
        for _ in range(halo_number):
            t = random.uniform(0, 2 * pi)  # 隨機不到的地方造成愛心有缺口
            x, y = heart_function(t, shrink_ratio=11.6)  # 魔法參數
            x, y = shrink(x, y, halo_radius)
            if (x, y) not in heart_halo_point:
                # 處理新的點
                heart_halo_point.add((x, y))
                x += random.randint(-14, 14)
                y += random.randint(-14, 14)
                size = random.choice((1, 2, 2))
                all_points.append((x, y, size))

        # 輪廓
        for x, y in self._points:
            x, y = self.calc_position(x, y, ratio)
            size = random.randint(1, 3)
            all_points.append((x, y, size))

        # 內容
        for x, y in self._edge_diffusion_points:
            x, y = self.calc_position(x, y, ratio)
            size = random.randint(1, 2)
            all_points.append((x, y, size))

        for x, y in self._center_diffusion_points:
            x, y = self.calc_position(x, y, ratio)
            size = random.randint(1, 2)
            all_points.append((x, y, size))

        self.all_points[generate_frame] = all_points

    def render(self, render_canvas, render_frame):
        for x, y, size in self.all_points[render_frame % self.generate_frame]:
            render_canvas.create_rectangle(x, y, x + size, y + size, width=0, fill=HEART_COLOR)


def draw(main: Tk, render_canvas: Canvas, render_heart: Heart, render_frame=0):
    render_canvas.delete('all')
    render_heart.render(render_canvas, render_frame)
    main.after(160, draw, main, render_canvas, render_heart, render_frame + 1)


if __name__ == '__main__':
    root = Tk()  # 一個Tk
    root.attributes('-fullscreen', True)  # 全屏
    root.attributes('-alpha', 0.9)  # 透明度
    canvas = Canvas(root, bg='black', height=CANVAS_HEIGHT, width=CANVAS_WIDTH)
    canvas.pack()
    heart = Heart()  # 心
    draw(root, canvas, heart)  # 開始畫畫~
    root.mainloop()

注意事項：

1.此項目的操作系統必須是 Windows ，如果你使用的是其他操作系統，請及時調整此處的分辨率。

如馬建倉在試操作時，因不是 Windows 系統，需將此處分辨率適配電腦。雖然這只是個非常小的有趣項目，不過也希望項目作者也能稍作完善。

2.如果你不想寫代碼，作者也為你提供了一個可以直接運行的愛心，只需要在 Gitee 倉庫里下載 exe 文件即可運行。

大家可以前往 Gitee ，親自上手試試。

第二件事

好了，該說第二件事了。

這不是雙十一到了，除了給開源人的浪漫，Gitee 也給想要更高效的開發者與團隊帶來了福利。

自 11 月 8 日以來，Gitee 企業版已經開啟了 「年終狂歡季」活動，三重驚喜福利新老用戶均可享受！

活動地址：https://gitee.com/activity/2022double11

今為了追到女朋友，眾位男士也是掏空心思，絞盡腦汁想各種表白的新招式，務必給女神一個難以忘記的表白。程序員當然也不例外。既然學的是編程，那就要好好利用編程做一個與眾不同的表白，那最適合的編程語言就是前端了，能夠輕而易舉的就做出各種讓女孩心動的代碼特效。

更多特效源碼，編程資料，私信我1即可免費領取。

首先特效鎮文：

今天我們講的就是如何用代碼做出一個愛心表白特效。源碼如下：

<!DOCTYPE html>

<html>

<head>

<style>

*{margin: 0; padding: 0;}

ul,ol{list-style: none;}

a{text-decoration: none;color: inherit;}

.clearfix:after{content: '';display: block;clear: both;}

.clear{clear: both;}

body{

background-color: #8a0a0a;

}

.love{

display: table;

flex-wrap: wrap;

margin: 100px auto;

}

.box{

float:left;

width: 25px;

height: 25px;

border-radius: 2px;

margin-right: 2px;

margin-bottom: 2px

}

.box:hover{

background: #8a0a0a;

}

.box:not(.transparent){

background-color: #fff;

opacity: 0;

transform: translateY(-300px);

animation: move 4s infinite;

}

@keyframes move{

25%{

opacity: 1;

transform: translateY(0);

}

50%{

opacity: 1;

transform: translateY(0);

}

65%{

opacity: 1;

transform: translateY(0);

}

100%{

opacity: 0;

transform: translateY(300px);

}

.box.delay1{

animation-delay: .1s;

}

.box.delay2{

animation-delay: .2s;

}

.box.delay3{

animation-delay: .4s;

}

.box.delay4{

animation-delay: .5s;

}

.box.delay5{

animation-delay: .7s;

}

.box.delay6{

animation-delay: .9s;

}

width: 1000px;

margin: 200px auto 0;

color: #fff;

font-size: 40px;

text-align: center;

}

</style>

</head>

<body>

</div>

<p>我愛代碼，也愛你，雖然我不善言辭，請讓我用我的方式說：我愛你！</p>

</body>

</html>

在線咨詢

上一篇：一個精悍的Javascript庫,實現Web打印(print.js)
下一篇：關于 HTML5 你需要了解的基礎知識

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

源碼分享 HTML 愛心

第一件事

操作步驟

源代碼：

注意事項：

第二件事

您的項目需求