鼠标悬浮时放大
<!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/
分享到:
相关推荐
ae lf glow 插件,仅供学习用.
unity 发光特效资源包 MK Glow 4.1.0
Highlight+Glow+System+v5,还有一个4版本的。两个版本的,希望能帮助大家。
glow11 自发光插件
Glow 软件大小:10.76 M 版本号:2.9.1-cn 更新时间:2015-01-07 包名:com.glow.android 权限详情:▪ 查看网络状态▪ 作为帐户身份验证程序▪ 拍摄照片和视频▪ 完全的互联网访问权限▪ 发现已知帐户▪ 管理帐户...
一款比较好使的Glow,VR上面使也没有问题
Glow_1.8.0(可与其他版本共存).apk
LF Glow 免安装 32位
glow11自发光插件
Unity边缘光插件合集,Highlight+Glow+System+v5,支持5.0版本
Unity内实现单个物体GLOW方案。有代码,有工程,也有示例图片。喜欢的可以下载来试试。。 单独Glow示例(unity5.3.1f1及以上版本) 也是从网上下载下来的资源。
Glow 11.unitypackage Unity中非常著名的 光效果
前端开源库-glow发光,使你的流量误差发光
glow11 UNITY3D 自发光光晕插件;glow11 UNITY3D 自发光光晕插件glow11 UNITY3D 自发光光晕插件;glow11 UNITY3D 自发光光晕插件
PS插件 光效发光效果滤镜插件 Topaz Glow v2.0.0
glow11+UNITY3D+自发光光晕插件
Glow 11.unitypackage Unity中非常著名的 光效果 Glow 11.unitypackage Unity中非常著名的 光效果
MK Glow(Ultimate)是一种使用简单、功能丰富且效果超级迅速的后处理效果,可以模拟明亮表面的光照散射。除了散光效果之外,还提供一些高度自定义的特效,比如镜头表面、镜头眩光和强光。该着色器兼容传统、轻便、...
unity5版本可以用的辉光插件glow11