Home > Developer > Web Develop
Also every Christmas, in order to let small station nowamagic a little festive atmosphere, here also get a Christmas tree put ~ We can first look at the effect.
Effect Demo<canvas id= "C" ></canvas> <script type= "Text/javascript" > var b = document.body; var c = document.getelementsbytagname (' canvas ') [0]; var a = C.getcontext (' 2d '); Document.body.clientWidth; Fix bug in Chrome. </script> <script type= "Text/javascript" >//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++<W; if (d<1) Beginpath (strokestyle=v+r+ ', ' + (r+b*l>>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,j<p;) j[o++]=[x+=t (R) *P+q () *6-3,y+=q () *u-8,z+=t (R-11) *p+q () *6-3,j/h*20+ ((j+=u) >h&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)%W) >>0, ((113*i+ (d*i)/60)% (290+i/99)) >>0);} d+=.02},1)//end of submission//</script>
Due to the use of canvas and some complex operations, it is recommended to use the Chrome browser to watch, the most fluent, followed by opera (already started a little card), Firefox is almost frame-by-frames, Safari seems to have a bug, unless you click on the mouse, it will hardly move. If you use IE, please be self-respecting. Chizhou-Sheng Crafts
Code<!doctype html>Want to know more, can go to see the original of the foreigner how I did the 1kb Christmas Tree
Finally, I wish you all a happy Christmas!
HTML5 Canvas Christmas Tree
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
