动态圣诞树html,圣诞了，送大家一颗HTML5圣诞树

又逢圣诞了，为了让小站NowaMagic有点节日气氛，这里也弄一棵圣诞树放放～大家可以先看下效果。

效果演示

由于用到canvas以及一些复杂的运算，建议使用Chrome浏览器观看，最为流畅，其次是Opera(已经开始有点卡了)，Firefox差不多是逐帧播放了，Safari貌似有bug，除非用鼠标不断点击，不然几乎不会动了。用IE的话请自重。

Code

JS1k, 1k demo submission [856]

var b = document.body;

var c = document.getElementsByTagName('canvas')[0];

var a = c.getContext('2d');

document.body.clientWidth; // fix bug in chrome.

// start of submission //

M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200;)with(M[k]=k?c.cloneNode(0):c){width=height=k?32:W=446;with(getContext('2d'))if(k>10|!k)for(font='60px Impact',V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'%23cca',i<7;)beginPath(fill(arc(U-i/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1)));else for(;x=T(i),y=Q()*2-1,D=x*x+y*y,B=E(D-x/.9-1.5*y+1),R=67*(B+1)*(L=k/9+.8)>>1,i++>0)+',40,.1)'),moveTo(U+x*8,U+y*8),lineTo(U+x*U,U+y*U),stroke();for(y=H=k+E(k++)*25,R=Q()*W;P=3,jH&Q()>.8?Q(P=9)*4:0)>>1]}setInterval(function G(m,l){A=T(D-11);if(l)return(m[2]-l[2])*A+(l[0]-m[0])*T(D);a.clearRect(0,0,W,W);J.sort(G);for(i=0;L=J[i++];a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1)){if(i==2e3)a.fillText('Merry Xmas!',U,345);if(!(i%7))a.drawImage(M[13],((157*(i*i)+T(D*5+i*i)*5)%W)>>0,((113*i+(D*i)/60)%(290+i/99))>>0);}D+=.02},1)

// end of submission //

最后祝大家圣(剩)诞快乐！

动态圣诞树html,圣诞了，送大家一颗HTML5圣诞树相关推荐

接着奏乐接着舞 Matlab制作圣诞树和圣诞快乐歌
0.前言时隔一年,又是一年圣诞时.仔细想想,距离上次更新已经过去了很久很久,打工人实在时间精力有限,疏于更新了,感谢还没取关的朋友们- 去年差不多这个时候的一篇关于Matlab画圣诞树的推送最近受到 ...
【圣诞限定】2022的末尾，送TA一颗圣诞树吧
2022年圣诞节,很高兴能遇见你. 一.前言不知不觉又到年末啦,今年遇到了超级超级棒的人,希望能跟他一起做很多很多事,完成很多很多未完成的心愿.既然是圣诞节限定,那就送他一颗圣诞树吧
圣诞新年送豪礼《远征》双蛋运动开启--国民网游戏
圣诞元旦送豪礼<远征>双蛋活动开启--国民网游戏原题目:圣诞新年送豪礼<远征>双蛋活动开启瑞雪纷飞,麋鹿报喜,圣诞老人乘雪撬离开<远征>世界,为玩家们送上圣诞祝愿 ...
圣诞节用Python画一颗圣诞树
圣诞节用Python画一颗圣诞树前言一.初级圣诞树二.中级圣诞树三.高级圣诞树四.超高级圣诞树总结前言正在学Python的你是不是很想在圣诞节给女朋友一个惊喜? 哦!忘了,或许你压根儿 ...
python简单圣诞树手工折纸_简单折纸圣诞树手工制作教程教你如何折简单的圣诞树...
简单折纸圣诞树手工制作教程教你如何折简单的圣诞树圣诞节到来之际,各种有趣的折纸手工制作开始受到大家的关注和喜爱哦.纸艺网也开始给大家推荐一些有趣的手工折纸制作.这里纸艺网推荐的这个折纸制作是一个折纸 ...
破防了，程序员用Python基于ESP32做了一颗“赛博朋克”圣诞树
圣诞节临近,氛围组热火朝天,设计师UED们不亏是专业出身,早早就弄了整条街最靓的树然而程序员变幻出一棵"赛博朋克"圣诞树它能燃烧,还能在家人爱人靠近时候 biubiu发送爱心 ...
圣诞树圣诞树圣诞树_圣诞购物
圣诞树圣诞树圣诞树 Today, I was hit over the head with a cucumber by an insane Christmas shopper. Next year ...
乐高收割机器人_乐高圣诞45002作品来啦！——驯鹿拉雪橇、圣诞树、圣诞棒棒糖...
圣诞节快乐圣诞系列作品第五弹来袭大家好我是zfeng老师,今天我们继续来圣诞节系列作品吧!有粉丝朋友留言说希望出一起用百变工程系列积木搭建的圣诞主题作品,今天它来了,wedo.ev3的作品也已经安 ...
圣诞节用代码写一颗圣诞树【html5写的3D逼真圣诞树外加python无延迟的豪华圣诞树】
文章目录前言[便捷源码下载处] 一.html版本豪华动态圣诞树抖音同款操作步骤 1.新建文本 3.将后缀txt改为html 4.双击打开 [这是动态的] 二.python取消延迟秒出图版 [全 ...
圣诞树圣诞树圣诞树_圣诞网页设计资源
圣诞树圣诞树圣诞树 Christmas Webdesign Resources Today we prepared a set of Christmas webdesign resources. ...

动态圣诞树html,圣诞了，送大家一颗HTML5圣诞树

动态圣诞树html,圣诞了，送大家一颗HTML5圣诞树相关推荐

最新文章

热门文章