javascript+HTML5的canvas實現(xiàn)七夕情人節(jié)3D玫瑰花效果代碼
本文實例講述了javascript+HTML5的canvas實現(xiàn)七夕情人節(jié)3D玫瑰花效果。分享給大家供大家參考。具體如下:
下面的玫瑰繪制用到了HTML 5的canvas,所以你的瀏覽器需要支持HTML 5。個人還是比較推薦chrome,這個效果在Firefox下也會稍卡。
效果圖:
演示地址:http://demo.jb51.net/js/2015/js-flower-canvas.html
具體代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>3D玫瑰花</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> 情人節(jié)快到了,這里送大家一枝玫瑰,無論是有對象還是沒對象的朋友們,情人節(jié)快樂~ 下面的玫瑰繪制用到了HTML 5的canvas,所以你的瀏覽器需要支持HTML 5。個人還是比較推薦chrome,這個效果在Firefox下也會稍卡。 <div id="demo" style="width:520; height:500px;"><canvas id="c" height="500" width="500"></canvas></div> <script> var b = document.body; var c = document.getElementsByTagName('canvas')[0]; var a = c.getContext('2d'); var canvas = document.getElementsByTagName('canvas')[0]; var ctx = canvas.getContext('2d'); document.body.clientWidth; with(m=Math)C=cos,S=sin,P=pow,R=random; c.width=c.height=f=500;h=-250; function p(a,b,c){ if(c>60) return[S(a*7)*(13+5/(.2+P(b*4,4)))-S(b)*50,b*f+50,625+C(a*7)*(13+5/(.2+P(b*4,4)))+b*400,a*1-b/2,a]; A=a*2-1; B=b*2-1; if(A*A+B*B<1) { if(c>37) { n=(j=c&1)?6:4;o=.5/(a+.01)+C(b*125)*3-a*300; w=b*h; return[o*C(n)+w*S(n)+j*610-390,o*S(n)-w*C(n)+550-j*350,1180+C(B+A)*99-j*300,.4-a*.1+P(1-B*B,-h*6)*.15-a*b*.4+C(a+b)/5+P(C((o*(a+1)+(B>0?w:-w))/25),30)*.1*(1-B*B),o/1e3+.7-o*w*3e-6] } if(c>32) { c=c*1.16-.15;o=a*45-20;w=b*b*h;z=o*S(c)+w*C(c)+620; return[o*C(c)-w*S(c),28+C(B*.5)*99-b*b*b*60-z/2-h,z,(b*b*.3+P((1-(A*A)),7)*.15+.3)*b,b*.7] } o=A*(2-b)*(80-c*2); w=99-C(A)*120-C(b)*(-h-c*4.9)+C(P(1-b,7))*50+c*2;z=o*S(c)+w*C(c)+700; return[o*C(c)-w*S(c),B*99-C(P(b, 7))*50-c/3-z/1.35+450,z,(1-b/1.2)*.9+a*.1, P((1-b),20)/4+.05] } } var draw = setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}',0); var demo = document.getElementById('demo'); function redraw(){ /* var d_c = document.createElement("canvas"); d_c.setAttribute("id","c"); d_c.setAttribute("width","520"); d_c.setAttribute("height","500"); demo.appendChild(d_c); */ draw = setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}',0); //alert(d_c); } function clear_canvas() { ctx.clearRect(0,0,520,500); //canvas.parentNode.removeChild(canvas); //刪除 } function stop_draw(obj){ clearInterval(obj); } </script> </body> </html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
- javascript結(jié)合html5 canvas實現(xiàn)(可調(diào)畫筆顏色/粗細/橡皮)的涂鴉板
- js+html5繪制圖片到canvas的方法
- JS+html5 canvas實現(xiàn)的簡單繪制折線圖效果示例
- javascript html5 canvas實現(xiàn)可拖動省份的中國地圖
- js+HTML5實現(xiàn)canvas多種顏色漸變效果的方法
- js+html5通過canvas指定開始和結(jié)束點繪制線條的方法
- js+html5實現(xiàn)canvas繪制圓形圖案的方法
- javascript+HTML5 Canvas繪制轉(zhuǎn)盤抽獎
- js HTML5 Canvas繪制轉(zhuǎn)盤抽獎
- js+html5實現(xiàn)canvas繪制簡單矩形的方法
- Javascript HTML5 Canvas實現(xiàn)的一個畫板
- JS+HTML5 Canvas實現(xiàn)簡單的寫字板功能示例
相關(guān)文章
js循環(huán)中使用正則失效異常的踩坑實戰(zhàn)
這篇文章主要給大家介紹了關(guān)于js循環(huán)中使用正則失效異常的踩坑實戰(zhàn),文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-05-05Javascript調(diào)用函數(shù)方法的幾種方式介紹
這篇文章主要介紹了Javascript調(diào)用函數(shù)方法的幾種方式介紹,本文講解了func()、(function(arg){})(window)、func.bind(sth)()、func.call()、func.apply()等5種方式,需要的朋友可以參考下2015-03-03如何實現(xiàn)動態(tài)刪除javascript函數(shù)
如何實現(xiàn)動態(tài)刪除javascript函數(shù)...2007-05-05