绘制心型（扩展：点赞特效）

cuifan1995 commented 4 years ago
绘制一个心型
（扩展）实现点赞特效 https://www.51qianduan.com/article/11483.html
tataqiuqiu commented 4 years ago
点
```html 心形
```
cuifan1995 commented 4 years ago
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            margin: 40px;
        }

        .heart1 {
            position: relative;
            top: 100px;
            left: 50%;
            width: 100px;
            height: 100px;
            background-color: tomato;
            transform: rotate(-45deg);
        }

        .heart1:before {
            content: "";
            position: absolute;
            top: -50px;
            left: 0;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: tomato;
        }

        .heart1:after {
            content: "";
            position: absolute;
            top: 0;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: tomato;
            border-radius: 50%;
        }

        .heart2 {
            font-size: 40px;
            color: tomato;
            font-style: normal;
        }
    </style>
</head>
<body>
<p>参考 <a href="https://www.jb51.net/css/686529.html">https://www.jb51.net/css/686529.html</a></p>
<div class="heart1"></div>
<p>字符 '\u2764' === '❤' // true</p>
<i class="heart2">❤</i>
<p>svg 参考 <a href="https://www.iconfont.cn/">https://www.iconfont.cn/</a> 字体方式 或svg 方式</p>
<svg t="1589424177282" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1464"
     width="200" height="200">
    <path d="M511.91 850.36a140.196 140.196 0 0 1-74.79-29.87 712.09 712.09 0 0 1-80.51-66.01C308.65 710.03 251.64 650.26 187 576.74c-82.19-96.32-78-239.24 9.69-330.58 83.44-89.03 221.99-97.11 315.22-18.39 93.23-78.71 231.76-70.71 315.31 18.22 87.81 91.37 92 234.45 9.69 330.79-64.6 73.47-121.64 133.29-169.6 177.75a714.49 714.49 0 0 1-80.47 65.88 140.282 140.282 0 0 1-74.93 29.95zM364.03 241.9c-45.88 0-89.72 18.91-121.22 52.27-63.03 65.12-66.39 167.43-7.77 236.54 63.19 71.89 118.66 130.05 164.86 172.8a645.003 645.003 0 0 0 72.53 59.73 98.238 98.238 0 0 0 39.47 18.99 98.052 98.052 0 0 0 39.42-19.03 645.194 645.194 0 0 0 72.53-59.73c46.21-42.67 101.67-100.91 164.86-172.8 58.61-69.12 55.25-171.42-7.77-236.54-60.46-64.46-160.81-70.27-228.31-13.23l-40.75 34.18-40.83-34.13a167.44 167.44 0 0 0-107.01-39.04h-0.01z"
          p-id="1465"></path>
</svg>
<p>box-shadow</p>
<style>
    .heart3 {
        position: relative;
        left: 50%;
        top: 50%;
        width: 105px;
        height: 105px;
        margin: -52.5px 0 0 -52.5px;
    }

    .heart3::before {
        content: '';
        display: block;
        transition: all 400ms;
        width: 15px;
        height: 15px;
        margin: -15px 0 0 -15px;
        box-shadow: 30px 15px #8e1a19, 45px 15px #ac0500, 75px 15px #f73f0c, 90px 15px #fa5f27, 15px 30px #740100, 30px 30px #8e0500, 45px 30px #8e1918, 60px 30px #ca1300, 75px 30px #f34f2b, 90px 30px #df351f, 105px 30px #f77c2a, 15px 45px #4b0000, 30px 45px #690100, 45px 45px #8e0f0b, 60px 45px #bf1000, 75px 45px #f84010, 90px 45px #f04222, 105px 45px #fa5724, 15px 60px #451312, 30px 60px #5a0100, 45px 60px #840e0c, 60px 60px #a51d1a, 75px 60px #ed2805, 90px 60px #d9321e, 105px 60px #f44622, 30px 75px #3b0000, 45px 75px #5d1a1b, 60px 75px #8e1a19, 75px 75px #a80700, 90px 75px #b90a00, 45px 90px #3d0000, 60px 90px #551415, 75px 90px #670100, 60px 105px #340000;
        animation: pulse 1.2s steps(1) infinite;
    }
</style>
<div class="heart3"></div>
<p>
    canvas <a
        href="https://www.cnblogs.com/sunshine21/p/7757958.html">https://www.cnblogs.com/sunshine21/p/7757958.html</a>
    <img src="桃心公式.png" alt="">
    点击心形发生动画
</p>
<canvas id="heart4"></canvas>

<script>
    ;(function () {
        var canvas = document.getElementById('heart4');
        var ctx = canvas.getContext('2d');
        canvas.width = 300;
        canvas.height = 300;
        var Heart = function (ctx, x, y, a) {
            this.ctx = ctx;
            this.x = x;
            this.y = y;
            this.a = a;
            this.vertices = [];
            for (let i = 0; i < 50; i++) {
                var t = i / 50 * (Math.PI * 2);// t为变量，均匀取一个周期50个(x,y)点连线 2PI为一个周期，
                var vector = {
                    x: this.a * (16 * Math.pow(Math.sin(t), 3)),
                    y: this.a * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t))
                }
                this.vertices.push(vector);
            }
            console.log(this.vertices)
        }
        Heart.prototype.draw = function () {
            this.ctx.beginPath();
            this.ctx.translate(this.x, this.y);
            this.ctx.rotate(Math.PI);
            for (let i = 0; i < 50; i++) {
                var vector = this.vertices[i];
                this.ctx.lineTo(vector.x, vector.y);
            }
            this.ctx.fillStyle = "red";
            this.ctx.fill();
            this.ctx.closePath()
        }
        Heart.prototype.animate = function () {
            this.clear();
            const speed = 1;
            this.y -= speed;
            this.draw();
            if (this.y > 0) {
                window.requestAnimationFrame(this.animate.bind(this))
            }
        }
        Heart.prototype.clear = function () {
            this.ctx.canvas.height = this.ctx.canvas.height
        }
        var heart = new Heart(ctx, 200, 200, 5);
        heart.draw();
        canvas.onmousedown = function (e) {
            heart.animate();
        }
    })();
</script>
</body>
</html>
runtimegroup / puzzle

绘制心型（扩展：点赞特效） #8
