JavaScript+html5 canvas制作的圆中圆效果实例

2019-11-20 10:40:54

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

<!DOCTYPE html><html> <head>  <title>demo</title>  <style type="text/css">   #canvas {    background:#F2F2F2; height:500px; height:500px; margin-top:100px; margin-left:200px;   }  </style> </head> <body>  <canvas id="canvas" width="500px" height="500px" ></canvas> </body> <script type="text/javascript">  (function() {    var dyl = {};    dyl.getDom = function(id) {        return document.getElementById(id);    }    dyl.getContext = function(canvasID) {        var canvas = this.getDom(canvasID);        if(!canvas) {            return null;        }        return canvas.getContext("2d");    }    if(!window.dyl) {        window.dyl = dyl;    }  })();  cache = {};  cache.context = dyl.getContext('canvas');  // 每个圈的圆个数控制  cache.scaleNmb = 6;  cache.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;  };  cache.draw = function() {   cache.context.fillRect(-10, -10, 20, 20);   for(var i=1; i<10; i++) {     cache.context.save();    for(var j=0; j<cache.scaleNmb*i; j++) {     cache.context.rotate(Math.PI*2/(cache.scaleNmb*i));     cache.context.fillStyle = cache.createColor();     cache.context.beginPath();     cache.context.arc(0, 20*i, 5, 0,Math.PI*2, true);     cache.context.closePath();     cache.context.fill();    }    cache.context.restore();   }  };  cache.init = function() {   cache.context.translate(250, 250);   cache.draw();  };  cache.init(); </script></html>

更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》、《jQuery常见经典特效汇总》及《JavaScript动画特效与技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：jQuery插件开发精品教程让你的jQuery提升一个台阶

下一篇：jQuery ajax分页插件实例代码