Canvas绘制可爱的鬼魂幽灵动画特效—

“前沿技术是指高技术领域中具有前瞻性、先导性和探索性的重大技术，是未来高技术更新换代和新兴产业发展的重要基础，是国家高技术创新能力的综合体现。”

—

效果实现

以视频效果展示（全程静音）：

—

今日知识分享

前沿技术的主要原则（1）是代表世界高技术前沿的发展方向。（2）是对国家未来新兴产业的形成和发展具有引领作用。（3）是有利于产业技术的更新换代，实现跨越发展。四是具备较好的人才队伍和研究开发基础。根据以上原则，要超前部署一批前沿技术，发挥科技引领未来发展的先导作用，提高我国高技术的研究开发能力和产业的国际竞争力。

世界知识产权组织2015年11月11日发布《2015年世界知识产权报告:突破式创新与经济增长》，分析了3D打印、纳米技术和机器人工程学等拥有促进未来经济增长潜力的新技术，并指出中国是在这3项最尖端前沿技术创新方面惟一向先进工业化国家靠近的新兴市场国家。（1）GIS与“数字地球”（2）虚拟现实（3）智能化与个性化的WEB信息检索技术（4）智能信息处理技术（5）网格技术与云计算

（6）下一代网
……

具体指引详见《https://baike.so.com/doc/443124-469228.html》

—

源码分享

Html:

<!doctype html><html><head><meta charset="utf-8"><title>Canvas鬼魂</title>
<style>canvas {  position: fixed;  top: 0;  left: 0;}</style>
</head><body>
<script type="text/javascript" src='js/p5.min.js'></script>
<div></div>
<script type="text/javascript">var blobs = [];
function setup() {  var iHeight = window.innerHeight;  if (iHeight < 500) {    iHeight = 500;  }  createCanvas(window.innerWidth, iHeight);
  drawingContext.shadowOffsetX = 0;  drawingContext.shadowOffsetY = 0;  drawingContext.shadowBlur = 60;  drawingContext.shadowColor = "rgb(255, 176, 190)";
  for (var i = 0; i < 13; i++) {    blobs.push(new Blob(random(width), random(height)));  }}
function draw() {  background(13, 33);
  for (var b = 0; b < blobs.length; b++) {    blobs[b].update();    blobs[b].show();  }}
function Blob(x, y) {  this.pos = createVector(x, y);  this.vel = p5.Vector.random2D();  this.vel.mult(random(1, 3));  this.r = random(42, 72);  this.yoff = random(1000);
  this.update = function() {    this.pos.add(this.vel);    if (this.pos.x > width || this.pos.x < 0) {      this.vel.x *= -1;    }    if (this.pos.y > height || this.pos.y < 0) {      this.vel.y *= -1;    }  }
  this.show = function() {    noStroke();    fill(255);    push();    translate(this.pos.x, this.pos.y);    beginShape();    var xoff = 0;    for (var a = 0; a < TWO_PI; a += 0.1) {      var offset;      if (a > PI/6 && a < 5 * PI/6) {        offset = map(noise(xoff, this.yoff), 0, 1, -0.31 * this.r, 0.78 * this.r);      } else {        offset = map(noise(xoff, this.yoff), 0, 1, -0.08 * this.r, 0.08 * this.r);      }      var r = this.r + offset;      var x = r * cos(a);      var y = r * sin(a);      vertex(x, y);      xoff += 0.1;    }    endShape(CLOSE);
    this.yoff += 0.08;    pop();
    var eyeOffset = 0.23 * this.r;
    stroke(54);    fill(54);    ellipse(this.pos.x - eyeOffset, this.pos.y - eyeOffset, 0.16 * this.r, 0.23 * this.r);    ellipse(this.pos.x + eyeOffset, this.pos.y - eyeOffset, 0.16 * this.r, 0.23 * this.r);    strokeWeight(4);    line(this.pos.x - eyeOffset * 2, this.pos.y - eyeOffset * 2, this.pos.x, this.pos.y - eyeOffset);    line(this.pos.x + eyeOffset * 2, this.pos.y - eyeOffset * 2, this.pos.x, this.pos.y - eyeOffset);    fill(255);    noStroke();    ellipse(this.pos.x - eyeOffset, this.pos.y - eyeOffset - 3, 0.08 * this.r, 0.125 * this.r);    ellipse(this.pos.x + eyeOffset, this.pos.y - eyeOffset - 3, 0.08 * this.r, 0.125 * this.r);
    fill(54);    arc(this.pos.x, this.pos.y, 0.5 * this.r, 0.5 * this.r, 0, PI);  }}</script>
</body></html>

JavaScript，比较凌乱，暂不贴出

写在最后

这只是微小的一部分关于前端的知识，如果你想更加深入的了解的，可以搜索更多你有兴趣的方面，祝你更加优秀！如果此篇文章确实对你有所帮助，请点一个赞，谢谢您的评价。此文章若有雷同，请联系本人，谢谢。最后再奉上源码，公众号回复 050 即可获取下载地址关注我，不迷路

Canvas绘制可爱的鬼魂幽灵动画特效——源码分享