canvas画布鼠标跟随（以鼠标为中心，不动时会有一群小人围着鼠标，鼠标运动时，所有的小人就会形成一条有间隔的线跟着鼠标移动）

时光飞逝，岁月依然

于 2020-09-13 10:20:52 发布

阅读量275

点赞数 1

分类专栏： canvas css js 文章标签： javascript css html canvas url

本文链接：https://blog.csdn.net/qq_43260038/article/details/108559334

版权

css 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

17 篇文章 0 订阅

订阅专栏

canvas

4 篇文章 0 订阅

订阅专栏

canvas画布鼠标跟随（以鼠标为中心，不动时会有一群小人围着鼠标，鼠标运动时，所有的小人就会形成一条有间隔的线跟着鼠标移动）

动态过程中的静态截图
在这里插入图片描述

<!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>
   @import url("https://fonts.googleapis.com/css?family=VT323");
body {
  background: radial-gradient(circle at 0 0, #ecc6d8, #fec4c4, #feecce, #fff6c9, #ccfcc3, #b3bded);
  height: 100vh;
  width: 100vw;
}

h1 {
  bottom: 2em;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 2.6em;
  left: 2em;
  position: absolute;
}

[class*='parrot'] {
  position: absolute;
  height: 35px;
  width: 35px;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.parrot-1 {
  background-image: url("http://cultofthepartyparrot.com/parrots/hd/parrot.gif");
}

.parrot-2 {
  background-image: url("http://cultofthepartyparrot.com/parrots/gothparrot.gif");
}

.parrot-3 {
  background-image: url("http://cultofthepartyparrot.com/parrots/oldtimeyparrot.gif");
}

.parrot-4 {
  background-image: url("http://cultofthepartyparrot.com/parrots/partyparrot.gif");
}

.parrot-5 {
  background-image: url("http://cultofthepartyparrot.com/parrots/parrotcop.gif");
}

.parrot-6 {
  background-image: url("http://cultofthepartyparrot.com/parrots/fastparrot.gif");
}

.parrot-7 {
  background-image: url("http://cultofthepartyparrot.com/parrots/slowparrot.gif");
}

.parrot-8 {
  background-image: url("http://cultofthepartyparrot.com/parrots/fiestaparrot.gif");
}

.parrot-9 {
  background-image: url("http://cultofthepartyparrot.com/parrots/pizzaparrot.gif");
}

.parrot-10 {
  background-image: url("http://cultofthepartyparrot.com/parrots/chillparrot.gif");
}

.parrot-11 {
  background-image: url("http://cultofthepartyparrot.com/parrots/blondesassyparrot.gif");
}

.parrot-12 {
  background-image: url("http://cultofthepartyparrot.com/parrots/parrotmustache.gif");
}

.parrot-13 {
  background-image: url("http://cultofthepartyparrot.com/parrots/hd/christmasparrot.gif");
}

.parrot-14 {
  background-image: url("http://cultofthepartyparrot.com/parrots/witnessprotectionparrot.gif");
}

.parrot-15 {
  background-image: url("http://cultofthepartyparrot.com/parrots/matrixparrot.gif");
}

.parrot-16 {
  background-image: url("http://cultofthepartyparrot.com/parrots/hd/prideparrot.gif");
}

.parrot-17 {
  background-image: url("http://cultofthepartyparrot.com/parrots/hd/revolutionparrot.gif");
}

.parrot-18 {
  background-image: url("http://cultofthepartyparrot.com/parrots/confusedparrot.gif");
}

.parrot-19 {
  background-image: url("http://cultofthepartyparrot.com/parrots/hd/beretparrot.gif");
}

.parrot-20 {
  background-image: url("http://cultofthepartyparrot.com/parrots/coffeeparrot.gif");
}

  </style>
 </HEAD>

 <BODY>
  <h1>Move the cursor for a party!</h1>
  <script>
   /* 
 * Party parrot gifs from http://cultofthepartyparrot.com
 * Circular mouse trail logic from Tim Tilton on Dynamic Drive http://dynamicdrive.com/dynamicindex13/circletext.htm
 */

const PARROTS = 25,
      SIZE = 30,
      SPACING = 4,
      DIAMETER = 30,
      ROTATION = 0.1,
      SPEED = 0.3,
      OFFSET = 20;

let parrots = [],
    a = Math.round(SIZE * DIAMETER * 0.208333),
    current = OFFSET,
    mouse = {
      x: a + OFFSET,
      y: a + OFFSET
    };

// populate parrots
for (let i = 0; i < PARROTS; i++) {
  parrots[i] = new Parrot(i);
}

function Parrot(i) {
  this.x = 0;
  this.y = 0;
  this.X = 0;
  this.Y = 0;
  this.div = document.createElement('div');
  this.div.id = 'parrot-' + i;
  this.div.className = 'parrot-' + getRandom(1,20);
  document.body.appendChild(this.div);
  console.log(this.div);
};

function placeParrot(parrot, x, y) {
  parrot.x = x;
  parrot.y = y;
  parrot.div.style.left = parrot.x + 'px';
  parrot.div.style.top = parrot.y + 'px';
}

function makeCircle() {
  let parrot;
  current -= ROTATION;
  for (let i = PARROTS - 1; i > -1; --i) {
    parrot = parrots[i];
    parrot.div.style.top = Math.round(parrot.y + a * Math.sin((current + i) / SPACING) - 15) + 'px';
    parrot.div.style.left = Math.round(parrot.x + a * Math.cos((current + i) / SPACING)) + 'px';
  }
}

addEventListener("mousemove", function(e) {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
});

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function draw() {
  let parrot = parrots[0];
  let prevParrot = parrots[0];
  parrot.x = parrot.X += (mouse.x - parrot.X) * SPEED;
  parrot.y = parrot.Y += (mouse.y - parrot.Y) * SPEED;
  for (let i = PARROTS - 1; i > 0; --i) {
    parrot = parrots[i];
    prevParrot = parrots[i-1];
    parrot.x = parrot.X += (prevParrot.x - parrot.X) * SPEED;
    parrot.y = parrot.Y += (prevParrot.y - parrot.Y) * SPEED;
  }
  makeCircle();
  requestAnimationFrame(draw);
}

draw();

  </script>
 </BODY>
</HTML>

时光飞逝，岁月依然

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas画布鼠标跟随（以鼠标为中心，不动时会有一群小人围着鼠标，鼠标运动时，所有的小人就会形成一条有间隔的线跟着鼠标移动）

canvas画布鼠标跟随（以鼠标为中心，不动时会有一群小人围着鼠标，鼠标运动时，所有的小人就会形成一条有间隔的线跟着鼠标移动）动态过程中的静态截图<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="Ed
复制链接

扫一扫

专栏目录