本文实例讲述了JavaScript html5画布制作色彩斑斓的正方形效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

index.html:

！DOCTYPE html html head meta http-equiv=' Content-type ' Content=' text/html；charset=UTF-8' /标题画布中的透明度/title style type=' text/CSS ' # canvas { background : black；页边距-顶部：100像素；左边距left :200 px }/style/head body canvas id=' canvas ' width=' 500 px ' height=' 500 px '/canvas/body script type=' text/JavaScript ' src=' http : canvas。js '/script脚本类型=' text/JavaScript '缓存={ }；var offsetX=50，offsetY=20cache。context=dyl。创建上下文(“画布”)；for(var I=0；i10I){ for(var j=0；j10j){ var=j * 0.1 0.1；（函数(I，j，alpha){ setTimeout(function(){ dyl。rect(dyl。createcolor())，i*50，j*50，100，100，alpha)；}，100 * j * I)；})(i，j，alpha)；} } /script/htmlcanvas.js:

(function(){ var dyl={ cache : } }；dyl.setContext=函数(上下文){ dyl。缓存。_ context=上下文；返回上下文；};戴尔。getdom=function(id){返回文档。getelementbyid(id)；};戴尔. GetContext=function(){ return dyl。缓存。_上下文；};戴尔。save=function(){ var context=dyl ._ GetContext()；语境？语境。save(): void(0)；};戴尔。restore=function(){ var context=dyl ._ GetContext()；语境？语境。restore(): void(0)；};戴尔。create context=function(canvasID){ var canvas=this。getdom(canvasID)；if(！canvas){ return null；}返回戴尔。setcontext(画布。get context(' 2d ')；};戴尔。create COlOr=function(){ var COlOr=' RGB '；颜色=数学。圆(数学。random()* 255)；color='，'；颜色=数学。圆(数学。random()* 255)；color='，'；颜色=数学。圆(数学。random()* 255)；color=')'；返回颜色；};dyl.addImg=function(img，x，y) { var context=dyl ._ GetContext()；if(！img ||！上下文){ return } if(img==' string '的类型){ var oImg=new Image()；oImg.src=imgoImg。onload=function(){ context。绘制图像(oImg，x，y)；}返回；} context.drawImage(img，x，y)；};dyl.rect=函数（颜色、x、y、宽度、高度){ var context=dyl ._ GetContext()；if(！上下文){ return}上下文。save()；context . FillStyle=color context . global Alpha=alpha？alpha : 1；context.fillRect(x，y，宽度，高度);语境。restore()；};dyl.circle=函数(颜色，x，y，r，alpha) { var context=dyl ._ GetContext()；语境。save()；context.fillStyle=colorcontext。begin path()；context.globalAlpha=alpha？alpha : 1；context.arc(x，y，r，0，2 *数学. PI)；语境。fill()；语境。笔画()；};dyl.clearRect=函数(x，y，宽度，高度){ var context=dyl ._ GetContext()；if(！上下文){ return} context.clearRect(x，y，宽度，高度);};dyl.scale=function(x，y) { var context=dyl ._ GetContext()；if(！上下文){退货} x=x？x : 1；y=y？y : 1；context.scale(x，y)；};if(！窗户。dyl){ window。dyl=dyl}})();更多关于射流研究…特效相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 、 《jQuery常见经典特效汇总》 及《JavaScript动画特效与技巧汇总》

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