html爱心特效代码

html爱心特效代码<!DOCTYPEHTMLPUBLIC”-//W3C//DTDHTML4.0Transitional//EN”><HTML><HEAD><TITLE>NewDocument</TITLE><METANAME=”Generator”CONTENT=”EditPlus”><METANAME=”Author”CONTENT=””><METANAME=”Keywor…

大家好,又见面了,我是你们的朋友全栈君。

html爱心特效代码

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME=”Generator” CONTENT=”EditPlus”>
  <META NAME=”Author” CONTENT=””>
  <META NAME=”Keywords” CONTENT=””>
  <META NAME=”Description” CONTENT=””>
  <style>
  html, body {

  height: 100%;
  padding: 0;
  margin: 0;
  background: #000;
}
canvas {

  position: absolute;
  width: 100%;
  height: 100%;
}
  </style>
 </HEAD>

 <BODY>
  <canvas id=”pinkboard”></canvas>
  <script>
  /*
 * Settings
 */
var settings = {

  particles: {

    length:   500, // maximum amount of particles
    duration:   2, // particle duration in sec
    velocity: 100, // particle velocity in pixels/sec
    effect: -0.75, // play with this for a nice effect
    size:      30, // particle size in pixels
  },
};

/*
 * RequestAnimationFrame polyfill by Erik Möller
 */
(function(){var b=0;var c=[“ms”,”moz”,”webkit”,”o”];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+”RequestAnimationFrame”];window.cancelAnimationFrame=window[c[a]+”CancelAnimationFrame”]||window[c[a]+”CancelRequestAnimationFrame”]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());

/*
 * Point class
 */
var Point = (function() {

  function Point(x, y) {

    this.x = (typeof x !== ‘undefined’) ? x : 0;
    this.y = (typeof y !== ‘undefined’) ? y : 0;
  }
  Point.prototype.clone = function() {

    return new Point(this.x, this.y);
  };
  Point.prototype.length = function(length) {

    if (typeof length == ‘undefined’)
      return Math.sqrt(this.x * this.x + this.y * this.y);
    this.normalize();
    this.x *= length;
    this.y *= length;
    return this;
  };
  Point.prototype.normalize = function() {

    var length = this.length();
    this.x /= length;
    this.y /= length;
    return this;
  };
  return Point;
})();

/*
 * Particle class
 */
var Particle = (function() {

  function Particle() {

    this.position = new Point();
    this.velocity = new Point();
    this.acceleration = new Point();
    this.age = 0;
  }
  Particle.prototype.initialize = function(x, y, dx, dy) {

    this.position.x = x;
    this.position.y = y;
    this.velocity.x = dx;
    this.velocity.y = dy;
    this.acceleration.x = dx * settings.particles.effect;
    this.acceleration.y = dy * settings.particles.effect;
    this.age = 0;
  };
  Particle.prototype.update = function(deltaTime) {

    this.position.x += this.velocity.x * deltaTime;
    this.position.y += this.velocity.y * deltaTime;
    this.velocity.x += this.acceleration.x * deltaTime;
    this.velocity.y += this.acceleration.y * deltaTime;
    this.age += deltaTime;
  };
  Particle.prototype.draw = function(context, image) {

    function ease(t) {

      return (–t) * t * t + 1;
    }
    var size = image.width * ease(this.age / settings.particles.duration);
    context.globalAlpha = 1 – this.age / settings.particles.duration;
    context.drawImage(image, this.position.x – size / 2, this.position.y – size / 2, size, size);
  };
  return Particle;
})();

/*
 * ParticlePool class
 */
var ParticlePool = (function() {

  var particles,
      firstActive = 0,
      firstFree   = 0,
      duration    = settings.particles.duration;
  
  function ParticlePool(length) {

    // create and populate particle pool
    particles = new Array(length);
    for (var i = 0; i < particles.length; i++)
      particles[i] = new Particle();
  }
  ParticlePool.prototype.add = function(x, y, dx, dy) {

    particles[firstFree].initialize(x, y, dx, dy);
    
    // handle circular queue
    firstFree++;
    if (firstFree   == particles.length) firstFree   = 0;
    if (firstActive == firstFree       ) firstActive++;
    if (firstActive == particles.length) firstActive = 0;
  };
  ParticlePool.prototype.update = function(deltaTime) {

    var i;
    
    // update active particles
    if (firstActive < firstFree) {

      for (i = firstActive; i < firstFree; i++)
        particles[i].update(deltaTime);
    }
    if (firstFree < firstActive) {

      for (i = firstActive; i < particles.length; i++)
        particles[i].update(deltaTime);
      for (i = 0; i < firstFree; i++)
        particles[i].update(deltaTime);
    }
    
    // remove inactive particles
    while (particles[firstActive].age >= duration && firstActive != firstFree) {

      firstActive++;
      if (firstActive == particles.length) firstActive = 0;
    }
    
    
  };
  ParticlePool.prototype.draw = function(context, image) {

    // draw active particles
    if (firstActive < firstFree) {

      for (i = firstActive; i < firstFree; i++)
        particles[i].draw(context, image);
    }
    if (firstFree < firstActive) {

      for (i = firstActive; i < particles.length; i++)
        particles[i].draw(context, image);
      for (i = 0; i < firstFree; i++)
        particles[i].draw(context, image);
    }
  };
  return ParticlePool;
})();

/*
 * Putting it all together
 */
(function(canvas) {

  var context = canvas.getContext(‘2d’),
      particles = new ParticlePool(settings.particles.length),
      particleRate = settings.particles.length / settings.particles.duration, // particles/sec
      time;
  
  // get point on heart with -PI <= t <= PI
  function pointOnHeart(t) {

    return new Point(
      160 * Math.pow(Math.sin(t), 3),
      130 * Math.cos(t) – 50 * Math.cos(2 * t) – 20 * Math.cos(3 * t) – 10 * Math.cos(4 * t) + 25
    );
  }
  
  // creating the particle image using a dummy canvas
  var image = (function() {

    var canvas  = document.createElement(‘canvas’),
        context = canvas.getContext(‘2d’);
    canvas.width  = settings.particles.size;
    canvas.height = settings.particles.size;
    // helper function to create the path
    function to(t) {

      var point = pointOnHeart(t);
      point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
      point.y = settings.particles.size / 2 – point.y * settings.particles.size / 350;
      return point;
    }
    // create the path
    context.beginPath();
    var t = -Math.PI;
    var point = to(t);
    context.moveTo(point.x, point.y);
    while (t < Math.PI) {

      t += 0.01; // baby steps!
      point = to(t);
      context.lineTo(point.x, point.y);
    }
    context.closePath();
    // create the fill
    context.fillStyle = ‘#ea80b0’;
    context.fill();
    // create the image
    var image = new Image();
    image.src = canvas.toDataURL();
    return image;
  })();
  
  // render that thing!
  function render() {

    // next animation frame
    requestAnimationFrame(render);
    
    // update time
    var newTime   = new Date().getTime() / 1000,
        deltaTime = newTime – (time || newTime);
    time = newTime;
    
    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    // create new particles
    var amount = particleRate * deltaTime;
    for (var i = 0; i < amount; i++) {

      var pos = pointOnHeart(Math.PI – 2 * Math.PI * Math.random());
      var dir = pos.clone().length(settings.particles.velocity);
      particles.add(canvas.width / 2 + pos.x, canvas.height / 2 – pos.y, dir.x, -dir.y);
    }
    
    // update and draw particles
    particles.update(deltaTime);
    particles.draw(context, image);
  }
  
  // handle (re-)sizing of the canvas
  function onResize() {

    canvas.width  = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
  }
  window.onresize = onResize;
  
  // delay rendering bootstrap
  setTimeout(function() {

    onResize();
    render();
  }, 10);
})(document.getElementById(‘pinkboard’));
  </script>
 </BODY>
</HTML>
 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/161663.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • String与StringBuffer的区别

    String与StringBuffer的区别String与StringBuffer的区别简单地说,就是一个变量和常量的关系。StringBuffer对象的内容可以修改;而String对象一旦产生后就不可以被修改,重新赋值其实是两个对象。StringBuffer的内部实现方式和String不同,StringBuffer在进行字符串处理时,不生成新的对象,在内存使用上要优于String类。所以在实际使用时,如果经常需要对一个字符串进行修改,例如插入、删除等操作,使用StringBuffer要更加适合一些。String:在String类中没有用来改变已有字

    2022年9月21日
    0
  • InputStream read()方法详解「建议收藏」

    InputStream read()方法详解「建议收藏」在Java7中,InputStream被定义为一个抽象类,相应的,该类下的read()方法也是一个抽象方法,这也就意味着必须有一个类继承InputStream并且实现这个read方法。查阅Java7API,我们可以看到,在InputStream中定义了三个重载的read()方法:但是在这三个方法中,只有参数列表为空的read方法定义为抽象方法,这也就意味着在直接继承自InputStre

    2022年9月21日
    0
  • Android 屏幕旋转 处理 AsyncTask 和 ProgressDialog 的最佳方案

    Android 屏幕旋转 处理 AsyncTask 和 ProgressDialog 的最佳方案转载请表明出处:http://blog.csdn.net/lmj623565791/article/details/379362751、概述众所周知,Activity在不明确指定屏幕方向和configChanges时,当用户旋转屏幕会重新启动。当然了,应对这种情况,Android给出了几种方案:a、如果是少量数据,可以通过onSaveInstanceState()和onRestoreI

    2022年7月14日
    14
  • qt realease版本运行错误(qt发布release版本)

    1、在QtCreator下用release跑一遍程序,生成相应的EXE文件;2、在QtCreator下编译好的release下的ImageProcesser.exe拷贝到一个文件夹下面;3、在 ImageProcesser.exe文件路径下,输入cmd可弹出命令行窗口;4、在命令行模式下输入windeployqtImageProcessor.exe,按下回车键后会将…

    2022年4月18日
    245
  • 物联网,大数据和云计算的基本关系和应用场景_云计算物联网大数据的区别

    物联网,大数据和云计算的基本关系和应用场景_云计算物联网大数据的区别  身处信息快速发展的今天,物联网、大数据、云计算这些名词在我们的生活中出现的越来越频繁,看似高大上的三者其实却和我们的生活息息相关。带你来认识下三者之间的关系吧!  大数据  大数据(bigdata),就是指种类多、流量大、容量大、价值高、处理和分析速度快的真实数据汇聚的产物。大数据或称巨量资料或海量数据资源,指的是所涉及的资料量规模巨大到无法透过目前主流软件工具,在合理时间内达到撷取、…

    2022年10月6日
    0
  • 微服务架构设计模式 pdf下载_常见微服务架构

    微服务架构设计模式 pdf下载_常见微服务架构链接:https://pan.baidu.com/s/1RCsi9bDoPgQw0swztzsmBQ提取码:jhie若链接失效,请联系本人:18642984053@163.com

    2022年10月22日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号