谁说程序员不懂浪漫，canvas制作浪漫满屋爱心飘动

web前端群，189394454，有视频、源码、学习方法等大量干货分享

谁说程序员不懂浪漫呢，程序员只是不善言语表达而已，下面我们就来看看这浪漫满屋的代码吧。

效果知识点：面向对象开发思想 , canvas画布 ，随机与运动函数, canvas图片绘制 ,动量设计，this与对象, 原型与构造函数 ，编程规范,逻辑思维，帧动画处理与平滑动画。

👇css代码：

  <style>
    *{margin:0;padding:0;}
    body{
        background:#303035;
        overflow:hidden; /*单页场景类特效 超出隐藏*/
    }
  </style>

👇javascript代码：

    <script>
        
        var canvas = document.querySelector('canvas'); //获取canvas元素
        var ctx = canvas.getContext('2d'); //创建canvas画布
        var wW = window.innerWidth; //获取浏览器宽度 screen.width
        var wH = window.innerHeight;
        var num = 100;// 绘制100个红心 100个红心对象
        var hearts=[]; //数组 心的集合
        var heartImage = new Image();// 创建一个新的image对象
        heartImage.src='images/heart.svg'; // 改变路径
        heartImage.onload = init; // 当图片加载完成之后渲染
    
        init(); //运行初始化函数
        
        
        
        function init(){ //创建一个函数(方法)
            //初始化画布的大小
            canvas.width = wW;
            canvas.height = wH;
            for(var i=0;i<num;i++){
                hearts[i]=new Heart();
            }
            requestAnimationFrame(render);
            window.addEventListener('resize',function(){
              wW = window.innerWidth; //获取浏览器宽度 screen.width
              wH = window.innerHeight;
            })
        }
         
        function Heart(){ //构造函数 首字母大写
            this.x = Math.random()*wW;//初始化生成范围为浏览器宽度
            this.y = Math.random()*wH;

            this.opacity = Math.random()*.5+.5; //[0.5+0.1-0.5]
            
            this.vel = { //位移参数 移动量和方向
                x: (Math.random()-.5)*4, // 0-.5=-.5 1-0.5 = 0.5 -值往左走 ﹢值往右走
                y: (Math.random()-.5)*4 //速度系数
            
            }

            this.initialW = 470; //基准宽度
            this.initialH = 410; //基准高度
             // 最终大小缩放比例targetScale 最小为0.02 
            this.targetScale= Math.random()*.15 +.02;
            // 初始化的时候大小缩放比例scale
            this.scale = this.targetScale*Math.random();
        }
        Heart.prototype.update = function(){//更新方法
            this.x += this.vel.x; // 改变心的x方向位置 10 10.5
            this.y += this.vel.y;
            
            if(this.x - this.width > wW || this.x + this.width < 0 ){
                this.scale = 0; //重置缩放值
                this.x = Math.random()*wW; //从新初始化x方向位置
            }
            if(this.y - this.height > wH || this.y + this.height < 0){
                this.scale = 0; //重置缩放值
                this.y = Math.random()*wH; //从新初始化x方向位置
            }

            this.scale += (this.targetScale-this.scale)*.01;
            // 当前大小 = 目标大小 - 当前大小
            // 0.3      = 0.3+(( 0.8 - 0.3 )* 0.01); 0.005+0.3 0.305
            // 0.8  = 0.8 + (0.8-0.8) *0.01;
            this.width = this.scale*this.initialW;
            this.height =this.scale*this.initialH;
        }
        Heart.prototype.draw = function(){ //绘制方法 原型方法
            ctx.globalAlpha = this.opacity; //红心透明度
            ctx.drawImage(heartImage,this.x,this.y,this.width,this.height);
        }
    
    
        function render(){//渲染函数
            ctx.clearRect(0,0,wW,wH);// 清空画布
            for(var i=0;i<num;i++){
                hearts[i].draw(); //对象的绘制方法
                hearts[i].update(); //每隔13毫秒重新绘制爱心坐标
            }
            
            requestAnimationFrame(render); //每隔13毫秒 调用一次render
        }
        
        function module(){ //修改内部作用域变量
            var person=[
                {
                    'name':'海牙',
                    'age':13,
                    'job':'前端工程师'
            
                },
                {
                    'name':'阿飞',
                    'age':3,
                    'job':'架构师'
            
                }
            ]
            var index=0;
            function mySelect(item){
                for(var i=0,len=person.length;i<len;i++){
                    if(person[i]['name']== item){
                        index = i;
                        return i;
                    }
                }
                    
            }
            function myUpdate(index,key,val){
                person[index][key] = val;
            
            }
            return {
                set:function(item,key,val){
                    myUpdate(mySelect(item),key,val);
                },
                get:function(){
                    return person[index];
                }
            }
        }
      
        var nmodule = module(); // json 对象
        nmodule.set('阿飞','age',2);
    
        console.log(nmodule.get())
        //console.log(numX);
        // 词法作用域 IIFE 变量声明提升
    </script>