Difference between revisions of "Template:CSU CHINA/JS/miaomiao"

 
(3 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
     var ctx = canvas.getContext("2d");
 
     var ctx = canvas.getContext("2d");
 
//初始化页面新的数量
 
//初始化页面新的数量
−
     var num = 10;
+
     var num = 20;
 
var maxnum = 100;
 
var maxnum = 100;
 
     var ww = window.innerWidth;
 
     var ww = window.innerWidth;
−
     var wh = window.innerHeight;
+
     var wh = window.innerHeight - 18;
  
  
Line 27: Line 27:
 
function resize() {
 
function resize() {
 
         ww = window.innerWidth;
 
         ww = window.innerWidth;
−
         wh = window.innerHeight;
+
         wh = window.innerHeight - 18;
 
console.log(wh);
 
console.log(wh);
−
         miao.style.height = wh+'px';
+
        miao.style.width = ww + 'px';
 +
         miao.style.height = wh +'px';
 
         canvas.width = ww;
 
         canvas.width = ww;
 
         canvas.height = wh;
 
         canvas.height = wh;

Latest revision as of 04:02, 9 December 2019

$(function () { // 初始化canvas var miao = document.getElementById("miao"); 

   var canvas = document.querySelector("canvas");
   var ctx = canvas.getContext("2d");

//初始化页面新的数量 

   var num = 20;

var maxnum = 100; 

   var ww = window.innerWidth;
   var wh = window.innerHeight - 18;



   var hearts = [];

   function init() {
       requestAnimationFrame(render);

miao.style.width = ww + 'px'; miao.style.height = wh + 'px'; 

       canvas.width = ww;
       canvas.height = wh;
       for (var i = 0; i < num; i++) {
           hearts.push(new Heart());
       }
       //      console.log(hearts)
   }

function resize() { 

       ww = window.innerWidth;
       wh = window.innerHeight - 18;

console.log(wh); 

       miao.style.width = ww + 'px';
       miao.style.height = wh +'px';
       canvas.width = ww;
       canvas.height = wh;
   }

   var timeaur;
   $("body").on("mousedown", function(event) {
       var e = event || window.event;
       var x = e.clientX,
           y = e.clientY;
       timeaur = setInterval(function() {
           console.log(123123)
           hearts.push(new Heart(x, y));
           num++
       }, 100)
       $("body").on("mousemove", function(event) {

           var e = event || window.event;
           var x = e.clientX,
               y = e.clientY;
           hearts.push(new Heart(x, y));
           num++
       })
   })

   $("body").on("mouseup", function() {
       clearInterval(timeaur)
       $("body").off("mousemove")
   })

   function Heart(x, y) {
       if (x) {

// 当是鼠标点击，传入位置时，生成心心在鼠标位置处 

           this.x = x;
           this.y = y;
       } else {

// 初始生成 

           this.x = Math.random() * ww;
           this.y = Math.random() * wh;
       }

// 透明度 

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

// 速度 

       this.vel = {
           x: (Math.random() - 0.5) * 4,
           y: (Math.random() - 0.5) * 4
       };

// 目标大小和初始大小（♥逐渐变大） 

       this.targetScale = (Math.random() * 0.15) + 0.02;
       this.scale = this.targetScale * Math.random();
   }

   Heart.prototype.update = function(i) {

// 原型变化 

       this.x += this.vel.x;
       this.y += this.vel.y;

       this.scale += (this.targetScale - this.scale) * 0.01;

// ♥离开屏幕 

       if (this.x - this.width > ww || this.x + this.width < 0) {

this.scale = 0; if(hearts.length <= maxnum){ this.x = Math.random() * ww; // console.log(hearts.indexOf(this)); } else{ var index = hearts.indexOf(this); hearts.splice(index,1); num--; i--; // console.log(hearts.length); } 

       }
       if (this.y - this.height > wh || this.y + this.height < 0) {

this.scale = 0; if(hearts.length <= maxnum){ this.y = Math.random() * wh; // console.log(hearts.indexOf(this)); } else{ var index = hearts.indexOf(this); hearts.splice(index,1); num--; i--; // console.log(hearts.length); } 

       }
       this.width = 473.8 * this.scale;
       this.height = 408.6 * this.scale;

return i; 

   }
   Heart.prototype.draw = function() {

ctx.globalAlpha = this.opacity; ctx.globalCompositeOperation = "source-over"; 

       ctx.drawImage(heartImage, this.x , this.y, this.width, this.height);
   }

   function render() {
       ctx.clearRect(0, 0, ww, wh);
       // ctx.globalAlpha = 1;
       // ctx.fillStyle = "rgba(255,255,255,0.3)";
       // ctx.fillRect(0, 0, ww, wh);
       for (var i = 0; i < num; i++) {

var heart = hearts[i]; i = heart.update(i); heart.draw(); 

       }
       requestAnimationFrame(render);
   }

   var heartImage = new Image();
   heartImage.onload = init();
   heartImage.src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NzMuOHB4IiBoZWlnaHQ9IjQwOC42cHgiIHZpZXdCb3g9IjAgMCA0NzMuOCA0MDguNiI+PHBhdGggZmlsbD0iI2QzMjkzMiIgZD0iTTQwNC42LDE2LjZDMzg1LjQsNi4xLDM2My41LDAsMzQwLDBjLTQxLjUsMC03OC41LDE4LjktMTAzLDQ4LjVDMjEyLjMsMTguOSwxNzUuMywwLDEzMy44LDAgYy0yMy4zLDAtNDUuMyw2LjEtNjQuNSwxNi42QzI3LjksMzkuNSwwLDgzLjQsMCwxMzMuOWMwLDE0LjQsMi40LDI4LjMsNi42LDQxLjJDMjkuNiwyNzguNCwyMzcsNDA4LjYsMjM3LDQwOC42IHMyMDcuMi0xMzAuMiwyMzAuMi0yMzMuNWM0LjMtMTIuOSw2LjYtMjYuOCw2LjYtNDEuMkM0NzMuOCw4My40LDQ0NS45LDM5LjYsNDA0LjYsMTYuNnoiLz48L3N2Zz4=";

   window.addEventListener("resize", resize);

})