js, canvas实现冬奥会立春效果图

摘要: 2022冬奥会开幕式里面有有一个类似立春的的开幕式,用JS 如何来实现了,其实很不难,本文就用js 来实现类型的效果

2022冬奥会开幕式里面有有一个类似立春的的开幕式,用JS 如何来实现了,其实很不难,本文就用js 来实现类型的效果,效果图如下:

实现代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Canvas发光大树动画</title>

<style type="text/css">
body { 
  background:hsla(0, 0%, 0%, 1);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: linear-gradient(to right top, hsla(0, 5%,5%, 0.5), hsla(0, 0%, 15%,1));
  background-image:-moz-linear-gradient(to right top, hsla(0, 5%,5%, 0.5), hsla(0, 0%, 15%,1));
	margin: 0;
  padding: 0;
  overflow: hidden;
  width:100%;
} 
    </style>
    	
</head>
<body>


<canvas id='canv'></canvas>

<script>
        var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var w2 = w* 0.5;
var h2 = h * 0.5;
var uu = 0;
var topiary = new branch(80, 0, 0);
var cnt = 0;

function anim(){
	cnt++;
  uu-=.5;
  	if (cnt%2) {
      draw();
    }
 window.requestAnimationFrame(anim);
}
anim();

function draw() {
    $.save();
    $.clearRect(0, 0, w, h);
    $.translate(w2, h*0.98);
    $.rotate(-Math.PI * 0.5);
    topiary.disp($);
    $.restore();
}

function branch(len, ang, gen){
    this.len = len;
    this.ang = ang;
    this.gen = gen;
    this.limb = [];
    this.sway = 0;
    this.mult = rnd(0.01, 0.1);
    this.spawn = 0;
    this.vel =0;
    
    if(gen < 10){
    	this.limb.push(new branch(len*rnd(0.8, 0.99), 
      rnd(0, Math.PI/6), this.gen+1));
    	this.limb.push(new branch(len*rnd(0.8, 0.99), 
      rnd(0, -Math.PI/6), this.gen+1));
    }
    
    this.disp = function($){
    	  this.sway++;  
        $.save(); 
        this.vel *= 0.9;
        var dif = 1-this.spawn;
        this.vel += (dif*0.1);
        this.spawn += this.vel;
        
        $.strokeStyle = "hsla(" + (uu % 360) + ",100%,50%,1)";
        $.lineWidth = 1;
        $.beginPath();
        $.rotate(this.ang + (Math.sin(this.sway*this.mult)*Math.PI/128));
        $.moveTo(0, 0);
        $.lineTo(this.len * this.spawn, 0);
        $.stroke();
        
        $.translate(this.len * this.spawn, 0);
        
        if(this.spawn > 0.6){
            for(var i = 0; i < this.limb.length; i++){
            	var limb = this.limb[i];
                limb.disp($);
            }
        }
        $.restore();
    };
}

function rnd(min, max){
	return Math.random()*(max - min) + min;
}
</script>
</body>
</html>


上一篇: 备份MySQL并保存两周数据
下一篇: 没有了
 评论 ( What Do You Think )
名称
邮箱
网址
评论
验证
   
 

 


  • 微信公众号

  • 我的微信

站点声明:

1、一号门博客CMS,由Python, MySQL, Nginx, Wsgi 强力驱动

2、部分文章或者资源来源于互联网, 有时候很难判断是否侵权, 若有侵权, 请联系邮箱:summer@yihaomen.com, 同时欢迎大家注册用户,主动发布无版权争议的 文章/资源.

3、鄂ICP备14001754号-3, 鄂公网安备 42280202422812号