`
ggsonic
  • 浏览: 258030 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5 glow circle

 
阅读更多
鼠标悬浮时放大
<!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/
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics