一年一度的圣诞节又来临了。在这个越来越受到国人重视的节日中,每个人有每个人的浪漫方式,当然程序员们也不例外。下面就来看看程序员们是如何为这个节日增添不一样的气氛的。
1. 使用canvas功能绘制的简单圣诞树
在绘图板中绘制下面这个图形并不算什么难事,但是使用代码来生成这个圣诞树却需要一定的HTML5基础。
下面这个图形使用HTML5中的<canvas>标签来绘制,如果你熟悉HTML5,这对你来说轻而易举。
2. 雪花效果
jQuery的出现,让各种动画效果变得更加容易。比如,你可以通过jQuery、jQuery.snow.js插件以及少量的代码,就可以让页面中飘舞这雪花。
3. 一个非常漂亮的圣诞贺卡
该贺卡通过Construct2制作,然后通过c2runtime.js使得该贺卡可以直接在网页中运行。Construct2是一款用来制作HTML5应用的软件,拥有一个清晰直观、“拖拽”操作的开发环境,即使你没有任何编程经验也能开发自己的HTML5应用。
随着编程技能的进一步掌握,你可以使用稍复杂的技术来实现一些更绚丽的效果。
4. HTML表单元素制作的圣诞树
下面这个圣诞树没有采用松树的形式,而是采用了HTML表单元素来制作,比如输入框、单选钮,进度条,按钮等。
5. 3D雪花效果
该效果使用HTML5的<canvas>标签和three.js实现了3D的雪花飞舞效果。你可以拖动鼠标进行旋转。
6. 代码不到1KB的3D圣诞树
下面这个3D圣诞树只用1021字节的JavaScript代码编写而成,逼真的3D及旋转效果,将JavaScript功能发挥到了极致。
7. 代码不到1KB的雪景效果
下面这个场景也是由不到1KB的JavaScript代码生成。
源码如下:
Javascript代码:
for(pina)a[p[0]+(p[6]
)]=a[p];
varM=Math,C=M.cos,S=M.sin,R=M.random,T=0,x=[],y=[],
W=innerWidth,H=innerHeight,L=2047,Z=100,V=20,N=511,M=1337;
c.width=W,b.style.overflow=hidden,b.style.margin=0px,c.height=H;
g=globalAlpha;h=fillStyle;for(i=N;i--;){x[i]=L*R();
y[i]=L*R()}setInterval(function(){T+=1/V;a[g]=0.2;
functionm(c){a[h]=c}m(#002);a.fc(0,0,W,H);
a[g]=1;u=1;m(#ffc);for(i=0;i<N/3;++i){
d=u=(u*M+1)&L;u=(u*M+1)&L;if(C(T*Z+i)<0.5){a.fx("\u2605",d,u)}}a.ba();
a.arc(2*W/3,H/3,40,0,6.3,1);a.ca();a.fill();m(#cfc);
B=H-V;for(j=0;j<5;++j){s=90-j*V;a.font=s+"px serif";
F=1;for(i=0;i<W;i+=(F=(F*M)%Z)){a.fx("\u25B2",i-s/2,B+S(i)*30);
}B-=s/2;}m(#eef);for(i=N;i--;){e=x[i];f=y[i];a.fx("\u06DE",e,f);
y[i]=(f+1)%L;x[i]=(e+C(i+T)/3)%L}for(i=N*3;i--;)
{a.fc((x[i&N]+i)&L,(y[i&N]+i)&L,1,1)}for(i=W;i--;)
{d =Z+V*S(i/Z)+S(i/10);a.fc(i,H-d,1,d)}},50);
此外还有很多 1KB 代码编写的圣诞效果,大家可以访问 js1k 圣诞主题页面。这些效果你写的出来吗?这些代码你看得懂吗?作为一个程序员,你会写出什么浪漫的代码呢。
结尾福利:
做会编程的程序员需要很多技能,还得懂浪漫,咱们要不断提升各种编程技术。最近很多喜欢编程的朋友问我有没有什么编程资料,java呀,web前端呀,PHP,.net,C语言系列的学习资料。因为最近几年都在认真搜集有价值的学习编程的资料,只为帮助那些想编程的人!一起加油!一起自学!
这些资料绝对比网上的那些编程资料强多了,都是我很辛苦搜集的,价值很高。相信看完这些,你绝对可以找到一份好工作!为了感谢大家的,今天我在这里统一说下吧,微信:‘程序员宝库,就可以免费领取上图价值好几万元的全套编程视频学习资料!咱们是自学编程的程序员联盟。
祝大家平安夜快乐!圣诞节快乐!大家一起做自学编程的程序员!争取升职加薪,一起加油!欢迎交流分享!