采用canvas画出来 然后随机产生每个圆圈的大小 颜色 位置都是可以做到的。这个很容易实现的。
创新互联从2013年创立，是专业互联网技术服务公司，拥有项目成都网站制作、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元丰泽做网站,已为上家服务,为丰泽各地企业和个人服务,联系电话:13518219792
利用css的圆角边框即可实现：
div style="width:100px; height:100px; text-align:center; line-height:100px; border:1px solid #fff; border-radius:50%; background-color:rgba(90,90,90,0.5); color:#fff"000/div
canvas绘图通过属于 canvas 的 JavaScript 方法完成
针对不支持html5的IE浏览器
!--[if IE]
script type="text/javascript" src="excanvas.js"/script
![endif]--
提示：canvas的绘图过程（即填充与描边）是非常消耗资源的，如果想节省系统资源提高效率，最好是绘制好所有路径，再一次性填充或描边图形。
canvas 方法
方法
用途
getContext(contextId) 公开在 canvas 上绘图需要的 API。惟一（当前）可用的 contextID 是 2d。
height 设置 canvas 的高度。默认值是 150 像素。
width 设置 canvas 的宽度。默认值是 300 像素。
createLinearGradient(x1,y1,x2,y2) 创建一个线性渐变。起始坐标为 x1,y1，结束坐标为 x2,y2。
createRadialGradient(x1,y1,r1,x2,y2,r2) 创建一个放射状渐变。圆圈的起始坐标是 x1,y1，半径为 r1。圆圈的结束坐标为 x2,y2，半径为 r2。
addColorStop(offset, color) 向一个渐变添加一个颜色停止。颜色停止（color stop） 是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。
fillStyle 设置用于填充一个区域的颜色 — 例如，fillStyle='rgb(255,0,0)'.
strokeStyle 设置用于绘制一根直线的颜色 — 例如，strokeStyle='rgb(255,0,0)'.
fillRect(x,y,w,h) 填充一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形。
strokeRect(x,y,w,h) 绘制一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形的轮廓。
moveTo(x,y) 将绘图位置移动到坐标 x,y。
lineTo(x,y) 从绘图方法结束的最后位置到 x,y 绘制一条直线。
1、绘制矩形：用到fillRect
!DOCTYPE htmlhtmlhead lang="en"
meta charset="UTF-8"
titlecanvas绘制图形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"
var canvas=document.getElementById("myCanvas"); //canvas 元素被设置为一个 JavaScript 变量
var myContext=canvas.getContext("2d"); //将getContext 应用到 canvas 元素 myContext.fillStyle="#ff0000"; //16进制设置填充颜色 myContext.fillRect(30,30,300,300); //定义大小 myContext.fillStyle='rgb(0,255,0)'; //rgb设置填充颜色 myContext.fillRect(60,60,300,300);
myContext.fillStyle='rgba(255,0,0,0.5)'; //rgb+透明度设置填充颜色 myContext.fillRect(90,90,300,300);/script/body/html
2、线性渐变，用到createLinearGradient
!DOCTYPE htmlhtmlhead lang="en"
meta charset="UTF-8"
titlecanvas绘制图形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"
var myCanvas=document.getElementById("myCanvas"); var myContext=myCanvas.getContext('2d'); var myGradient=myContext.createLinearGradient(30,30,300,300); //创建一个线性渐变 myGradient.addColorStop(0,"#ff0000"); //位置0和1之间，颜色值 myGradient.addColorStop(0.5,"#00FF00");
myGradient.addColorStop(1,"#ff00ff");
myContext.fillStyle=myGradient; //用线性渐变填充 myContext.fillRect(0,0,400,400);/script/body/html
3、放射性渐变，用到createRadialGradient
!DOCTYPE htmlhtmlhead lang="en"
meta charset="UTF-8"
titlecanvas绘制图形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"var myCanvas=document.getElementById('myCanvas'); var myContext=myCanvas.getContext('2d'); var myGradient=myContext.createRadialGradient(300,300,0,300,300,400); //6个参数 myGradient.addColorStop("0","#ff0000");
myGradient.addColorStop("1","#00ff00");
myContext.fillStyle=myGradient;
myContext.fillRect(0,0,300,300);/script/body/html
4、绘制矩形，与填充的不同，这个是描边效果
!DOCTYPE htmlhtmlhead lang="en"
meta charset="UTF-8"
titlecanvas绘制图形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"
var myCanvas=document.getElementById("myCanvas"); var myContext=myCanvas.getContext('2d');
myContext.strokeStyle="#ff0000"; //设置笔触纯色 myContext.strokeRect(0,0,100,100);/script/body/html
(当宽度为1px时，很明显的出现了模糊的现象，解决方法是数值都加上0.5，具体原因就自己百度下吧)
5、渐变笔触
!DOCTYPE htmlhtmlhead lang="en"
meta charset="UTF-8"
titlecanvas绘制图形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"
var myCanvas=document.getElementById("myCanvas"); var myContext=myCanvas.getContext('2d'); var myGradient=myContext.createLinearGradient(0,0,100,0);
myGradient.addColorStop(0,"#ff0000");
myGradient.addColorStop(1,'#0000ff');
myContext.strokeStyle=myGradient; //设置渐变笔触 myContext.lineWidth=5; //描边宽度 myContext.strokeRect(0,0,100,100);/script/body/html
6、绘制圆，圆周长公式=2∏r
!DOCTYPE htmlhtmlhead lang="en"
meta charset="UTF-8"
titlecanvas绘制图形/title/headbodycanvas id="myCanvas" width="500" height="500"/canvasscript type="text/javascript"
var myCanvas=document.getElementById("myCanvas"); var myContext=myCanvas.getContext('2d');
myContext.beginPath(); //开始一个新的绘制路径 myContext.arc(100,75,50,0,2*Math.PI); //以坐标点(100,75)为圆心，起始角为0，绘制一个半径为50px的圆形 myContext.stroke(); //按照指定的路径绘制弧线/script/body/html
7、绘制圆形
!DOCTYPE htmlhtmlhead lang="en"
meta charset="UTF-8"
titlecanvas绘制图形/title/headbodycanvas id="myCanvas" width="500" height="500" style="margin:100px 0 0 100px;"/canvasscript type="text/javascript"
var myCanvas=document.getElementById("myCanvas"); var myContext=myCanvas.getContext('2d');
myContext.arc(100,100,50,0,2*Math.PI);
myContext.fillStyle="#ff0000";
myContext.fill();/script/body/html
8、绘制直线
!DOCTYPE htmlhtmlhead lang="en"
meta charset="UTF-8"
titlecanvas绘制图形/title/headbody style="padding:500px;"canvas id="myCanvas" width="500" height="500" /canvasscript type="text/javascript"
var myCanvas=document.getElementById("myCanvas"); var myContext=myCanvas.getContext('2d');
myContext.lineWidth=5;
myContext.moveTo(0,0); //从坐标(0,0)到(200,0) myContext.lineTo(200,0);
myContext.stroke(); //绘制已定义的路径/script/body/html
9、绘制曲线
!DOCTYPE htmlhtmlhead lang="en"
meta charset="UTF-8"
titlecanvas绘制图形/title/headbody style="padding:500px;"canvas id="myCanvas" width="500" height="500" /canvasscript type="text/javascript"
var myCanvas=document.getElementById("myCanvas"); var myContext=myCanvas.getContext('2d');
myContext.moveTo(20,20);
myContext.quadraticCurveTo(20,100,200,20);
myContext.stroke();/script/body/html
引用
script src="" type="text/javascript"
/script
script language="javascript" type="text/javascript"
$(function() {
$('div.circle').mouseover(function() {
$('div.outer').addClass('hover');
$('div.middle').addClass('hover');
});
$('div.circle').mouseout(function() {
$('div.outer').removeClass('hover');
$('div.middle').removeClass('hover');
});
});
/script
做出之后的效果图：
