使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例

使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例

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

运行效果截图如下：

具体代码如下：

#canvas {

background:#F2F2F2; height:500px; height:500px; margin-top:100px; margin-left:200px;

}

(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 = {};

= dyl.getContext( canvas );

// 每个圈的圆个数控制

cache.scalemb = 6;

= 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() {

.fillRect(-10, -10, 20, 20);

for(var i=1; i<10; i) {

.save();

for(var j=0; j

.rotate(Math.PI*2/(cache.scalemb*i));

.fillStyle = ();

.beginPath();

.arc(0, 20*i, 5, 0,Math.PI*2, true);

.closePath();

.fill();

}

.restore();

}

};

cache.init = function() {

.translate(250, 250);

cache.draw();

};

cache.init();

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

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

时间： 2016-01-24