JavaScript+html5 canvas制作色彩斑斓的正方形效果

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

index.html：

<！DOCTYPE html><html> <head><meta http-equiv="Content-type" content="text/html;charset=UTF-8" /><title>canvas中的透明度</title><style type="text/css"> #canvas {background:black; margin-top:100px; margin-left:200px; }</style> </head> <body><canvas id="canvas" width="500px" height="500px" ></canvas> </body> <script type="text/javascript" src="canvas.js"></script> <script type="text/javascript">cache = {};var offsetX = 50, offsetY = 20;cache.context = dyl.createContext（"canvas"）;for（var i=0; i<10; i++） { for（var j=0; j<10; j++） {var alpha = j * 0.1 + 0.1;（function（i, j ,alpha） { setTimeout（function（） {dyl.rect（dyl.createColor（）, i*50, j*50, 100, 100, alpha）; }, 100*j*i）;}）（i, j ,alpha）; }} </script></html>

canvas.js：

（function（） {var dyl = {cache: {}};dyl.setContext = function（context） {dyl.cache._context = context;return context;};dyl.getDom = function（id） {return document.getElementById（id）;};dyl._getContext = function（） {return dyl.cache._context;};dyl.save = function（） {var context = dyl._getContext（）;context ? context.save（） : void（0）;};dyl.restore = function（） {var context = dyl._getContext（）;context ? context.restore（） : void（0）;};dyl.createContext = function（canvasID） {var canvas = this.getDom（canvasID）;if（！canvas） {return null;}return dyl.setContext（canvas.getContext（"2d"））;};dyl.createColor = function（） {var color = "rgb（";color += Math.round（Math.random（）*255）;color += ",";color += Math.round（Math.random（）*255）;color += ",";color += Math.round（Math.random（）*255）;color += "）";return color;};dyl.addImg = function（img, x, y） {var context = dyl._getContext（）;if（！img || ！context） {return;}if（typeof img === "string"） {var oImg = new Image（）;oImg.src = img;oImg.onload = function（） {context.drawImage（oImg, x, y）;}return;} context.drawImage（img, x, y）;};dyl.rect = function（color, x, y, width, height, alpha） {var context = dyl._getContext（）;if（！context） {return;}context.save（）;context.fillStyle = color;context.globalAlpha = alpha ? alpha : 1;context.fillRect（x, y, width, height）;context.restore（）;};dyl.circle = function（color, x, y, r, alpha） {var context = dyl._getContext（）;context.save（）;context.fillStyle = color;context.beginPath（）;context.globalAlpha = alpha ? alpha : 1;context.arc（x, y, r, 0, 2*Math.PI）;context.fill（）;context.stroke（）;};dyl.clearRect = function（x, y, width, height） {var context = dyl._getContext（）;if（！context） {return;}context.clearRect（x, y, width, height）;};dyl.scale = function（x, y） {var context = dyl._getContext（）;if（！context） {return;}x = x ? x : 1;y = y ? y : 1;context.scale（x, y）;};if（！window.dyl） {window.dyl = dyl;}}）（）;

更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》、《jQuery常见经典特效汇总》及《JavaScript动画特效与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。