karakusa枝形吊灯

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
canvas.width=canvas.height=400;
baum();

function baum(){
    var a,b,c,d,e,x,y,r;
    ctx.fillStyle="rgb(255,255,255)";
    ctx.fillRect(0,0,canvas.width,canvas.height);
    tim=new Date().getTime()/71;
    c=[];
    r=tim/32;
    for(a=0;a<14;a++){
        b=200;
        if(a%2==1)b=190;
        x=Math.cos(r)*b;
        y=Math.sin(r)*b;
        c.push([200+x,200+y]);
        r+=Math.PI*2/14;
    }
    
    for(a=0;a<7;a++){
        b=c[a*2];
        d=c[a*2+1];
        e=c[(a*2+13)%14];
        tri([[200,200],b,d],0);
        tri([[200,200],b,e],0);
    }
    requestAnimationFrame(baum);
}

function tri(p,ban){
    var a,b,c,d,e,f,x,y,han,r1,r2;
    x=y=0;
    for(a=0;a<3;a++){
        x+=p[a][0];
        y+=p[a][1];
    }
    x=x/3-canvas.width/2;
    y=y/3-canvas.height/2;
    han=Math.pow(x*x+y*y,0.5);
    c=0.2+Math.sin(tim/13)*0.15;
    r1=0.5+Math.sin(han/20*(1+Math.sin(tim/19)*0.7)+tim/41)*c;
    r2=1-r1;
    c=p[0][0]*(p[1][1]-p[2][1]);
    c+=p[1][0]*(p[2][1]-p[0][1]);
    c+=p[2][0]*(p[0][1]-p[1][1]);
    c=Math.abs(c);
    
    if(c<5000){
        if(ban%5==1){
            ctx.beginPath();
            for(a=0;a<p.length;a++){
                b=p[a];
                ctx.lineTo(b[0],b[1]);
            }
            sic(p,ban);
        }
        if(c<200)return;
    }
    
    d=0;
    for(a=0;a<p.length;a++){
        b=p[a];
        c=p[(a+1)%p.length];
        x=b[0]-c[0];
        y=b[1]-c[1];
        e=Math.pow(x*x+y*y,0.5);
        if(e>d){
            d=e;
            f=a;
        }
    }
    
    a=p[f];
    b=p[(f+1)%p.length];
    c=p[(f+2)%p.length];
    x=a[0]*r1+b[0]*r2;
    y=a[1]*r1+b[1]*r2;
    tri([b,c,[x,y]],ban+1);
    tri([c,a,[x,y]],ban+4);
}

function sic(ret,nam){
    var a,b,c,d,e,x,y,tx,ty,p,t,max,hai,x1,y1,x2,y2,r1,r2;
    
    hai=[];
    for(a=0;a<ret.length;a++)hai[a]=ret[(a+nam)%ret.length];
    
    p=[];
    tx=ty=0;
    for(a=0;a<hai.length;a++){
        p[a]=hai[a];
        tx+=p[a][0];
        ty+=p[a][1];
    }
    tx=tx/hai.length;
    ty=ty/hai.length;
    
    for(a=0;a<hai.length+1;a++){
        b=(a+1)/(hai.length+1);
        c=1-b;
        x=p[a%hai.length][0]*c+tx*b;
        y=p[a%hai.length][1]*c+ty*b;
        p.push([x,y]);
    }
    
    t=[];
    for(a=0;a<p.length;a++){
        b=p[a];
        c=p[(a+1)%p.length];
        t.push([(b[0]+c[0])/2,(b[1]+c[1])/2]);
    }
    
    max=4;
    ctx.beginPath();
    for(a=0;a<p.length-2;a++){
        b=t[a];
        c=p[a+1];
        d=t[(a+1)%p.length];
        
        for(e=0;e<max;e++){
            r1=e/max;
            r2=1-r1;
            x1=b[0]*r2+c[0]*r1;
            y1=b[1]*r2+c[1]*r1;
            x2=c[0]*r2+d[0]*r1;
            y2=c[1]*r2+d[1]*r1;
            x=x1*r2+x2*r1;
            y=y1*r2+y2*r1;
            ctx.lineTo(x,y);
        }
    }
    ctx.stroke();
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>karakusa枝形吊灯-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号