欢迎来到 IT实训基地 - 科迅教育
咨询电话:400-836-0509
首页
科迅动态
就业真相
视频教程
项目实战
学员专访
技术交流
当前位置:
首页
技术交流
HTML5 Canvas千纸鹤动画特效
HTML5 Canvas千纸鹤动画特效
浏览量:475
时间:2019/5/24
类别:技术交流

今天我们来分享一款很好看的千纸鹤飞翔效果,如图所示:

微信图片_20190524105100.png

主要是使用到Canvas这个额技术。先看html5的代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>HTML5 Canvas千纸鹤动画特效</title>

<link rel="stylesheet" href="css/style.css">

</head>

<body>

<div id="controls"></div>

<script src='js/p5.min.js'></script>

<script src="js/index.js"></script>

</body>

</html>

然后是样式的效果:

* {

margin: 0;

padding: 0;

}

html, body {

width: 100%;

height: 100%;

overflow: hidden;

background: black;

}

canvas {

display: block;

}

#controls {

z-index: 2;

margin: 20px;

position: absolute;

top: 0;

left: 0;

color: white;

}

接下来是脚本:

birds = [];

let numBirds = 50;

 

class Bird{

  constructor(){

    this.pos   = [random(width), random(height)];

    this.size  = pow(random(), 2)*80 + 40;

    this.angle = random(PI/16) + PI/8;

    this.speed = this.size/600;

    this.hue   = random();

    

    let p = [

      [0, 0],

      [random(.00, .10),  random(.1, .4)], //beak

      [random(.10, .50), -random(.1, .2)], //head

      [random(.50, .80),  random(.1, .3)], //body

      [random(.80, 1.0), -random(.2, .4)], //tail

      [1, 0],

      [random(.30, .40), 0],               //wing base 1

      [random(.80, .90), 0],               //wing base 2

      [random(.50, .65), -random(.4, .6)], //wing tip 1

      [random(.65, .70), -random(.4, .6)], //wing tip 2

    ];

    

    this.triangles = [

      //   idx,     idx,     idx, color              , isWing

      [...p[0], ...p[1], ...p[2], randColor(this.hue), false], //head

      [...p[3], ...p[4], ...p[5], randColor(this.hue), false], //tail

      [...p[6], ...p[7], ...p[8], randColor(this.hue), true ], //back wing

      [...p[0], ...p[2], ...p[3], randColor(this.hue), false], //body 1

      [...p[2], ...p[3], ...p[5], randColor(this.hue), false], //body 2

      [...p[6], ...p[7], ...p[9], randColor(this.hue), true ], //front wing

    ]

  }

  render(){

    push();

    let p = this.pos;

    translate(...p);

    scale(this.size);

    strokeWeight(1/this.size);

    

    p[0] += cos(this.angle+PI)*this.speed*20;

    p[1] += sin(this.angle+PI)*this.speed*20;

    if (p[0] < -this.size  ) p[0] += width +this.size;

    if (p[1] < -this.size/2) p[1] += height+this.size/2;

    

    let s = cos(frameCount*this.speed)

    rotate(this.angle);

    this.triangles.map(t => {

      fill(...(t[6]))

      if (t[7]) triangle(...t.slice(0, 5), t[5]*s);

      else      triangle(...t);

    })

    

    pop();

  }

}

 

function randColor(base = 0, amt=.2){

  return [(base+random(amt)-amt/2)%1, .2 + random(amt), .8 + random(amt)];

}

 

function setup (){

  pixelDensity(1);

  createCanvas();

  colorMode(HSB, 1, 1, 1);

  windowResized();

}

 

function init(){

  birds = [];

  for (let i = 0; i < numBirds; i++) birds.push(new Bird());

  birds = birds.sort((a,b) => a.size - b.size);

}

 

function draw(){

  background(0, .5);

  birds.map(b => b.render());

}

 

function mousePressed(){windowResized();}

function windowResized(){

  resizeCanvas(windowWidth, windowHeight);

  init();

}

这期就到这里,下期见。


77
南京校区:南京市建邺区新城科技园广聚路33号安科大厦4楼
18724002960
南通校区:南通市崇川区人民中路23号新亚大厦3楼
13626271253
上海校区:筹建中...
敬请期待
全国咨询电话
400-836-0509
周一至周日   08:30-21:30
关注免费学习
苏ICP备15009282号     科迅教育     法律顾问:江苏瑞慈律师事务所     Copyright 2008 -
领取学习视频资料
限前100名
您好,您想咨询哪门课程呢?