本文实例讲述了JavaScript html5画布制作的百花齐放效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html html标题演示/标题样式类型=' text/CSS '正文{ margin :0划水：0;} #画布{ border:5px纯灰色；箱形阴影：0 0 15px 15px # 494949插图；页边距-顶部：50像素；左边距left :200 px }/style/head body canvas id=' canvas ' width=' 1000 px ' height=' 500 px '/canvas script type=' text/JavaScript ' var dyl={ }；戴尔。canvas=文档。getelementbyid(' canvas ')；戴尔。CTX=戴尔。帆布。get context(' 2d ')；戴尔。运行时=0；戴尔。颜色列表=' 01234567890 abcdefbcdef ' .拆分("");戴尔。colorlistlength=dyl。colorlist。长度；dyl.arcList=null/** *得到16进制随机颜色值*/dyl。GetColor=function(){ var color=' # '；for(var I=0；i6；I){ color=dyl。颜色列表[数学。地板(数学。random()* dyl。颜色列表长度]；}返回颜色；};/** * 一个随机角度，随机初始速度的斜抛对象*/var Arc=函数{//设置自有属性这个。v=数学。圆(数学。random()* 100)50；这个。角度=数学。圆(数学。random()* 145)45；this.startTime=新日期();这个_ angle=this.angle/180*Math.PI;这个. v_x=这个。v*Math.cos(这个. _ angle)；这个。v _ y _ start=这个。数学。罪恶(这一点._ angle)；这个。颜色=dyl。GetColor()；this . x=500 this . g=250 this . y=490 this。指数=I；var _ self=这。run=function(){ var endTime=new Date()；var timeSpan=(结束时间-_ self。开始时间)/1000；var v _ y _ now=_ self。v _ y _ start-1/2 * _ self。数学。功率(时间跨度，2)；_ self。x=_ self。x _ self。v _ x * timeSpan_ self。y=_ self。y-(_ self。v _ y _ start * timeSpan-1/2 * _ self。数学。功率(时间跨度，2))；归还这个；};归还这个；};/** * 全局绘制图像*/dyl。draw=function(){ var arcList=dyl。arcListvar CTX=dyl . CTX dyl . runtimefor(var I=0，length=arcList . lengtilengti){ var arc=arcList[I]；if(！arc){ 0继续；} arc。run()；CTX。save()；CTX。begin path()；CTX。FillStyle=arc。颜色；(arc.x，arc.y，2，0，Math .PI * 2)；CTX。fill()；CTX。close path()；CTX。restore()；}控制台。日志(dyl。运行时)；如果(dyl。Runtime=25){ setTiME out(dyl。init，1050)；} else { setTimeout(dyl.draw，20)；} };/** * 初始化整个事件*/dyl。init=function(){ dyl。CTX。透明矩形(0，0，1000，500)；戴尔。arclist=[]；戴尔。运行时=0；for(var I=0；i100I){ dyl。arclist。推(新Arc(I))；}戴尔。draw()；};戴尔。init()；/脚本/正文/html更多关于射流研究…特效相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 及《jQuery常见经典特效汇总》

希望本文所述对大家Java脚本语言程序设计有所帮助。