JS基于HTML5的canvas標(biāo)簽實(shí)現(xiàn)炫目的色相球動(dòng)畫(huà)效果實(shí)例
本文實(shí)例講述了JS基于HTML5的canvas標(biāo)簽實(shí)現(xiàn)色相球效果。分享給大家供大家參考,具體如下:
運(yùn)行效果截圖如下:
具體代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>JS canvas標(biāo)簽制作色相球</title> </head> <body> <canvas></canvas> <script type="text/javascript"> var canvas,ctx,max,p,count; window.onload=function(){ var a,b,r; canvas = document.getElementsByTagName('canvas')[0]; ctx = canvas.getContext('2d'); canvas.width=canvas.height=400; ctx.fillRect(0,0,400,400); max=80; count=150; p=[]; r=0; for(a=0;a<max;a++){ p.push([Math.cos(r),Math.sin(r),0]); r+=Math.PI*2/max; } for(a=0;a<max;a++)p.push([0,p[a][0],p[a][1]]); for(a=0;a<max;a++)p.push([p[a][1],0,p[a][0]]); rus(); }; function rus(){ var a,b,c,d,e,s,tim,p2,xp,yp,xp2,yp2,x,y,z,x1,y1,z1; ctx.globalCompositeOperation = "source-over"; ctx.fillStyle="rgba(0,0,0,0.03)"; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = "lighter"; tim=count/5; for(e=0;e<3;e++){ tim*=1.7; s=1-e/3; a=tim/59; yp=Math.cos(a); yp2=Math.sin(a); a=tim/23; xp=Math.cos(a); xp2=Math.sin(a); p2=[]; for(a=0;a<p.length;a++){ x=p[a][0];y=p[a][1];z=p[a][2]; y1=y*yp+z*yp2; z1=y*yp2-z*yp; x1=x*xp+z1*xp2; z=x*xp2-z1*xp; z1=Math.pow(2,z*s); x=x1*z1; y=y1*z1; p2.push([x,y,z]); } s*=120; for(d=0;d<3;d++){ for(a=0;a<max;a++){ b=p2[d*max+a]; c=p2[((a+1)%max)+d*max]; ctx.beginPath(); ctx.strokeStyle="hsla("+((a/max*360)|0)+",70%,60%,0.15)"; ctx.lineWidth=Math.pow(6,b[2]); ctx.lineTo(b[0]*s+200,b[1]*s+200); ctx.lineTo(c[0]*s+200,c[1]*s+200); ctx.stroke(); } } } count++; requestAnimationFrame(rus); } </script> </body> </html>
PS:由于這里使用了HTML5的相關(guān)技術(shù),建議讀者使用火狐、谷歌、opera等支持HTML5效果較好的瀏覽器運(yùn)行該上述代碼。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript圖形繪制技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js實(shí)現(xiàn)div模擬模態(tài)對(duì)話框展現(xiàn)URL內(nèi)容
這篇文章主要介紹了js實(shí)現(xiàn)div模擬模態(tài)對(duì)話框展現(xiàn)URL內(nèi)容的功能,涉及javascript動(dòng)態(tài)操作頁(yè)面元素樣式與ajax調(diào)用的相關(guān)技巧,需要的朋友可以參考下2016-05-05用javascript實(shí)現(xiàn)畫(huà)板的代碼
用javascript實(shí)現(xiàn)畫(huà)板的代碼...2007-09-09js中hasOwnProperty的屬性及實(shí)例用法詳解
在本篇文章里小編給大家整理的是一篇關(guān)于js中hasOwnProperty的屬性及實(shí)例用法詳解內(nèi)容,有需要的朋友們可以跟著學(xué)習(xí)下。2021-11-11AJAX跨域請(qǐng)求json數(shù)據(jù)的實(shí)現(xiàn)方法
這篇文章介紹了AJAX跨域請(qǐng)求json數(shù)據(jù)的實(shí)現(xiàn)方法,有需要的朋友可以參考一下2013-11-11Thinkphp模板沒(méi)有解析直接原樣輸出的解決方法
這篇文章主要介紹了Thinkphp模板沒(méi)有解析直接原樣輸出的解決方法,是很多開(kāi)發(fā)者都遇到的問(wèn)題,非常實(shí)用,需要的朋友可以參考下2014-10-10JavaScript實(shí)現(xiàn)文件下載的超簡(jiǎn)單兩種方式分享
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)文件下載的超簡(jiǎn)單兩種方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12Javascript中的getter和setter初識(shí)
最近在工作中遇到了getter和setter,getter 是一種獲得屬性值的方法,setter是一種設(shè)置屬性值的方法。下面這篇文章主要給大家介紹了關(guān)于Javascript中g(shù)etter和setter的相關(guān)資料,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-08-08