html5 glow circle
鼠标悬浮时放大
两层canvas,一层不刷新，一层动态变化
there is a good demo here http://html5.litten.com/using-multiple-html5-canvases-as-layers/
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var scale = 1.0;
var FPS = 60;
var width = canvas.width;
var height = canvas.height;
ctx.fillStyle = "black";
ctx.fillRect(0,0,width,height);
canvas.onmouseover = onMouseOver;
canvas.onmouseout = onMouseOut;
setInterval(onEnterFrame,1000/FPS);
function onMouseOver(){
scale = 1.6;
}
function onMouseOut(){
scale = 1.0;
}
function onEnterFrame(){
var grd=ctx.createRadialGradient(100,100,25,100,100,50);
grd.addColorStop(0,"#0600d7");
grd.addColorStop(1,"black");
ctx.fillStyle=grd;
ctx.fillRect(0,0,300,300);
ctx.fillStyle = "#030066";
ctx.beginPath();
ctx.arc(100, 100, 25*scale, 0, Math.PI*2,false);
ctx.fill();
}
</script>
</body>
</html>
两层canvas,一层不刷新，一层动态变化
<!DOCTYPE html>
<html>
<body>
<div style="width: 300px; height: 300px; position: relative;" id="container">
<canvas id="overlay" style="position: absolute; left: 0px; top: 0px;z-index:1;" width="300" height="300">your browser not support canvas</canvas>
<canvas id="mycanvas" style="position: absolute; left: 0px; top: 0px;z-index:2;" width="300" height="300">your browser not support canvas</canvas>
</div>
<script type="text/javascript">
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
var overlay = document.getElementById("overlay");
var ovctx = overlay.getContext("2d");
var scale = 1.0;
var num = 1;
var FPS = 20;
var width = canvas.width;
var height = canvas.height;
ovctx.fillStyle = "#000";
ovctx.fillRect(0,0,width,height);
drawOverLay(50,50);
drawOverLay(150,150);
drawOne(100,100);
canvas.onmouseover = onMouseOver;
canvas.onmouseout = onMouseOut;
setInterval(onEnterFrame,1000/FPS);
function onMouseOver(){
scale = 1.6;
}
function onMouseOut(){
scale = 1.0;
}
function onEnterFrame(){
num = num +1;
drawOne(100+num,100-num);
}
function drawOne(x,y){
if (y<25)
{
num = 0;
}
ctx.clearRect(0,0,width,height);
var grd=ctx.createRadialGradient(x,y,25,x,y,50);
grd.addColorStop(0,"#0600d7");
grd.addColorStop(1,"black");
ctx.fillStyle=grd;
ctx.beginPath();
ctx.arc(x, y, 50, 0, Math.PI*2,false);
ctx.closePath();
ctx.fill();
//ctx.fillRect(0,0,300,300);
ctx.fillStyle = "#030066";
ctx.beginPath();
ctx.arc(x, y, 25*scale, 0, Math.PI*2,false);
ctx.closePath();
ctx.fill();
}
function drawOverLay(x,y){
var grd=ovctx.createRadialGradient(x,y,25,x,y,50);
grd.addColorStop(0,"#0600d7");
grd.addColorStop(1,"black");
ovctx.fillStyle=grd;
ovctx.beginPath();
ovctx.arc(x, y, 50, 0, Math.PI*2,false);
ovctx.closePath();
ovctx.fill();
ovctx.fillStyle = "#030066";
ovctx.beginPath();
ovctx.arc(x, y, 25*scale, 0, Math.PI*2,false);
ovctx.closePath();
ovctx.fill();
}
</script>
</body>
</html>
there is a good demo here http://html5.litten.com/using-multiple-html5-canvases-as-layers/