程序员的浪漫-桃心表白

2022-03-03 10:31:16 阅读：191 来源： 互联网

标签：function canvas 15 表白桃心 55 ctx 程序员 bezierCurveTo

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粒子特效</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #canvas {
        background-color: #000;
    }

    body {
        overflow: hidden;
    }
</style>

<body>
    <canvas id="canvas">你的游览器不支持canvas</canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    var arrList = [];

    function init() {
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
    }
    window.onresize = init
    init()
    function random(max, min) {
        return (max - min) * Math.random() + min; //平均值
    }
    //构造函数，创建球形对象
    function Ball(x, y) {
        this.x = x;
        this.y = y;
        this.r = 30;
        this.vx = random(5, -5);
        this.vy = random(5, -5);
        this.colorList = ['red', 'yellow', 'white', 'green', 'pink'];
        this.color = this.colorList[Math.floor(random(0, 6))];
        this.a = 1;
        this.va = 0.969
    }
    Ball.prototype = {
        updata: function () {
            this.x += this.vx;
            this.y += this.vy;
            this.a *= this.va;
        },
        draw: function () {
            ctx.beginPath();
            // ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
            ctx.moveTo(this.x, this.y);
            ctx.bezierCurveTo(this.x, this.y - 3, this.x, this.y - 15, this.x - 25, this.y - 15);
            ctx.bezierCurveTo(this.x - 55, this.y - 15, this.x - 55, this.y + 22.5, this.x - 55, this.y + 22.5);
            ctx.bezierCurveTo(this.x - 55, this.y + 40, this.x - 35, this.y + 62, this.x, this.y + 80);
            ctx.bezierCurveTo(this.x + 40, this.y + 62, this.x + 55, this.y + 40, this.x + 55, this.y + 22.5);
            ctx.bezierCurveTo(this.x + 55, this.y + 22.5, this.x + 55, this.y - 15, this.x + 25, this.y - 15);
            ctx.bezierCurveTo(this.x + 10, this.y - 15, this.x, this.y - 3, this.x, this.y);
            ctx.fill();
            ctx.font = "24px serif";
            ctx.fillText("热巴",this.x-25,this.y+35)
            ctx.fillStyle = this.color;
            ctx.globalAlpha = this.a;
            ctx.globalCompositeOperation = 'lighter';
            ctx.fill();
            this.updata();
        }
    }

    function main() {
        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
        arrList.forEach(item => {
            item.draw()
        })
        requestAnimationFrame(main); //递归调用
    }
    canvas.addEventListener('mousemove', function (e) {
        creat(e.clientX, e.clientY)
    })

    function creat(x, y) {
        var temp = new Ball(x, y)
        arrList.push(new Ball(x, y))
    }
    main()
</script>

</html>

标签：function,canvas,15,表白,桃心,55,ctx,程序员,bezierCurveTo
来源： https://www.cnblogs.com/qiqi400820/p/15958600.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

程序员的浪漫-桃心表白