JS基於HTML5的canvas標簽實現炫目的色相球動畫效果實例
編輯：關於JavaScript
本文實例講述了JS基於HTML5的canvas標簽實現色相球效果。分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JS canvas標簽制作色相球</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的相關技術，建議讀者使用火狐、谷歌、opera等支持HTML5效果較好的浏覽器運行該上述代碼。
更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript圖形繪制技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
小編推薦
熱門推薦