代码清单彩色球体动画的JavaScript代码
varcanvas=document.querySelector("canvas");varcontext=canvas.getContext('2d');varr,cx,cy,radgrad;vardrawCircles=function(){//fadeexistingcontent
context.fillStyle='rgba(.5)';context.fillRect(0,0,canvas.width,canvas.height);//drawnewspheresfor(vari=0;i〈360;i+=15){
//randompositionandsizecx=Math.randomQ*canvas.width;cy=Math.random()*canvas.height;r=Math.random()*canvas.widtn/lO.O;//defineradialgradientradgrad=context.createRadialGradient(
宁波网站建设认为0+(r*5),0-(r*5),r/,
,r)I
radgrad.addColorStop(0.0,'hslf'+i+',%,75%)1)；radgrad.addColorStop(0.9,'hsl(1+i+',%,50%)')；radgradaddColorStop(,rgba(0,)_);//drawcirclecontext,saveQ;
context.translatefcx,cy);
context.beginPath();
context.moveTo(0+r,0);
contextarc(,r,0,Math.PI*);
context.fillStyle=radgrad;
context.fill();
context.restore();
};〉
drawCircles();//drawfirstsetofspheres//start/stopanimationatpulsespeedvarpulse=60;
varrunning=null;
canvas.onclick=function(){if(running){window,clearlnterval(running);running=null;else{running=window.setInterval(
"drawCircles()",/pulse
〉);
〉；
在定义了canvas、context以及一些其他变量之后，从drawCircleso开始正式工作。一个半透明白色矩形将此前调用drawCirclesO函数生成的内容淡化，然后用for循环绘出新的球体。Math.randomO随机生成每个球体的位置及半径——圆心位于画布内任意位置，半径最多为画布宽度的十分之一。
为了确保这些圆看上去是球体，我们创建了一个径向渐变，由右上方的一个亮点及完整的圆形构成。在for循环中，通过过渡色(colorStop)的递增来实现基于HSL颜色空间的色彩渐变效果。在每个循环中，颜色角度都增加15°，由此完成颜色从红到绿、从绿到蓝、从蓝到黑，最后又从黑到红之间的转换。
在计算每个球体颜色时，我们都会根据不同亮度用到一对颜色：前一个较浅的颜色表示亮点，后一个较深的颜色用于球体边缘。addColorStopO的第三次调用将球体最边缘淡化为透明的黑色，我们通过这种方法生成24个球体，为了更清楚地了解，图9展示了球体所用的每对颜色。
之后，我们根据定义好的渐变绘出球体。插入context.save()与context.restore()保证了translate()所做的临时位移不会作用于后面生成的圆。完成了drawCircles()函数后，我们可以画出第一个球体，并编写计时器部分。
约15行编码就足以让我们通过一个onclick事件监听器来开始及停止动画。第一次点击画布时，我们通过window.setInterval()开始动画，并将唯一的intervallD保存在running变量中。win[a-z]o[a-z].SetInterval()中的时间以毫秒为单位，因此我们需要通过变量pulse将其转换为每分钟若干拍。
—旦动画开始播放，intervallD将被赋值给running变量，等到下一次单击时，再通过window,clearlnterval(running)将其中断。在中断播放后，我们将running重设为null,这样下一次单击画布时又将重新开始动画播放。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
