满屏爱心HTML

仅代表个人看法

输入以下字符，保存后将后缀改成svg

并作为第一个程序

之后编写第二个程序

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>爱心</title>
   <style>
       *{margin:0; padding:0;}
       body{ background-color: #1E1E1E;        }
   </style>
</head>
<body>
   <canvas id="drawHeart"></canvas>

init();

       function Heart(type){
           this.type = type;
           // 初始化生成范围
           this.x = Math.random() * wW;
           this.y = Math.random() * wH;

this.opacity = Math.random() * .5 + .5;

           // 偏移量
           this.vel = {
               x: (Math.random() - .5) * 5,
               y: (Math.random() - .5) * 5
           }

           this.initialW = wW * .5;
           this.initialH = wH * .5;
           // 缩放比例
           this.targetScale = Math.random() * .15 + .02; // 最小0.02
           this.scale = Math.random() * this.targetScale;

           // 文字位置
           this.fx = Math.random() * wW;
           this.fy = Math.random() * wH;
           this.fs = Math.random() * 10;
           this.text = getText();

           this.fvel = {
               x: (Math.random() - .5) * 5,
               y: (Math.random() - .5) * 5,
               f: (Math.random() - .5) * 2
           }
       }

       Heart.prototype.draw = function(){
           ctx.save();
           ctx.globalAlpha = this.opacity;
           ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);
           ctx.scale(this.scale + 1, this.scale + 1);
           if(!this.type){
               // 设置文字属性
               ctx.fillStyle = getColor();
               ctx.font = 'italic ' + this.fs + 'px sans-serif';
               // 填充字符串
               ctx.fillText(this.text, this.fx, this.fy);
           }
           ctx.restore();
       }
       Heart.prototype.update = function(){
           this.x += this.vel.x;
           this.y += this.vel.y;

           if(this.x - this.width > wW || this.x + this.width < 0){
               // 重新初始化位置
               this.scale = 0;
               this.x = Math.random() * wW;
               this.y = Math.random() * wH;
           }
           if(this.y - this.height > wH || this.y + this.height < 0){
               // 重新初始化位置
               this.scale = 0;
               this.x = Math.random() * wW;
               this.y = Math.random() * wH;
           }

           // 放大
           this.scale += (this.targetScale - this.scale) * .1;
           this.height = this.scale * this.initialH;
           this.width = this.height * 1.4;

           // -----文字-----
           this.fx += this.fvel.x;
           this.fy += this.fvel.y;
           this.fs += this.fvel.f;

           if(this.fs > 50){
               this.fs = 2;
           }

           if(this.fx - this.fs > wW || this.fx + this.fs < 0){
               // 重新初始化位置
               this.fx = Math.random() * wW;
               this.fy = Math.random() * wH;
           }
           if(this.fy - this.fs > wH || this.fy + this.fs < 0){
               // 重新初始化位置
               this.fx = Math.random() * wW;
               this.fy = Math.random() * wH;
           }
       }

       function render(){
           ctx.clearRect(0, 0, wW, wH);
           for(var i = 0; i < hearts.length; i++){
               hearts[i].draw();
               hearts[i].update();
           }
           requestAnimationFrame(render);
       }
   </script>
</body>
</html>

将文件名后缀改为HTML

之后先点开第一个程序，再点开第二个程序就会出现

本文遵守 Creative Commons协议

如有转载请说明

侵权必究

更多推荐

满屏爱心HTML