<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$</title> </head> <body> <canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas> </body> <script src="jquery-2.1.4.js"></script> <script> var colors = (function () { return ( "aliceblue,antiquewhite,aqua,aquamarine,azure,beige,bisque,black,blanchedalmond,blue," + "blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk," + "crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta," + "darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray," + "darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick," + "floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey," + "honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon," + "lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink," + "lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyellow," + "lime,limegreen,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple," + "mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue," + "mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid," + "palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue," + "purple,rebeccapurple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna," + "silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,transparent," + "tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen" ).split(','); })(); //颜色集合 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); function Chain(opt) { /* if (!opt) throw new Error("请设置相关参数"); if(!opt.ctx) throw new Error("请传递上下文"); if(!opt.bigX) throw new Error("请传递大圆圆心x"); if(!opt.bigY) throw new Error("请传递大圆圆心y"); var _defaultOpt={ num: 5, start: 0, bigRadius:150, smallRadius:10 }; $.extend(this,_defaultOpt,opt);*/ for(var key in opt){ this[key] = opt[key]; } this.drawChain(); } Chain.prototype = { constructor: Chain, drawChain: function () { this.drawBigCircle(); this.drawSmallCircles(); }, drawBigCircle: function () { var ctx = this.ctx; ctx.beginPath(); //绘制大圆 ctx.arc(this.bigX, this.bigY, this.bigRadius, 0, 2 * Math.PI); ctx.stroke(); }, drawSmallCircles: function () { //绘制小圆 var radian = 2 * Math.PI / 5; for (var i = 0; i < this.num; i++) { var smallRadian = this.start + radian * i; this.drawSmallCircle(smallRadian,this.color[i*10+10]); } }, drawSmallCircle: function (smallRadian,color) { var b = this.bigRadius * Math.cos(smallRadian); var h = this.bigRadius * Math.sin(smallRadian); var sX = this.bigX + b; var sY = this.bigY + h; var ctx = this.ctx; this.ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(sX, sY, this.smallRadius, 0, 2 * Math.PI); ctx.fillStyle = color; ctx.fill(); } }; var start = 0; var start2 = 1; var bigR = 150; var scale = true; var timer = setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height); new Chain({ ctx:ctx, bigX:300, bigY:300, bigRadius:bigR, num:5, smallRadius:10, start:start, color:colors }); new Chain({ ctx:ctx, bigX:300, bigY:300, bigRadius:300, num:20, smallRadius:30, start:start2, color:colors }); if(scale){ bigR--; if(bigR == 10){ scale = false; } }else{ bigR++; if(bigR == 150){ scale = true; } } start2 += 0.002*Math.PI; start += 0.01 * Math.PI; }, 100); </script> </html>
