html5圆圈随机效果,JavaScript+html5 canvas制作的圆中圆效果实例

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

运行效果截图如下：

具体代码如下：

demo

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

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.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();

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