帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» canvas跟随鼠标
canvas跟随鼠标
浏览:601次
-
评论:0次
-
发布时间:2017-04-12
Html
Css
Js
请使用支持Canvas标签的浏览器
html,body { width:100%; height:100%; margin:0; padding:0; text-align:center; } #canvas { display:block; } #canvas:hover { cursor:crosshair; }
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var cw = canvas.width = window.innerWidth; var ch = canvas.height = window.innerHeight; var Circle = function(cx, cy, r, alivetime) { //圆心x坐标 this.cx = cx; //圆心y坐标 this.cy = cy; //圆半径 this.r = r; //圆形生存时间,单位毫秒 this.aliveTime = alivetime || 5000; //ms //定义只读属性,保存圆形产生时刻,用以计算动画进程 Object.defineProperty(this, 'borntime', { configurable: false, enumerable: true, writable: false, value: Date.now() }); //圆形生成时初始半径,只读,不同于this.r,this.r的值可以动态改变,以实现缩放的效果 Object.defineProperty(this, 'sr', { configurable: false, enumerable: true, writable: false, value: this.r }); //随机产生[0,1]范围内值,作为动画一开始的进度,营造交替进行的效果 this.sp = Math.random(); //初始透明度为1,后面会逐渐减为0,即动画结束后清除圆形时有渐隐的效果 this.alpha = 1; //初始时圆形色调值 this.hue = parseInt(Math.random() * 360); //圆形的填充颜色 Object.defineProperty(this, 'fillcolor', { configurable: false, enumerable: true, get: function() { return `hsla(${this.hue},100%,50%,${this.alpha})`; } }); Circle.pool.push(this); } //每次新产生圆形时,放入Circle.pool数组中 Circle.pool = []; //判断圆形是否“死亡”,即是否要进行清除圆形 Circle.judgeDeath = function(o) { return (Date.now() - o.borntime) >= o.aliveTime; } //动画每帧更新圆形有关属性 Circle.prototype.update = function() { if (Circle.judgeDeath(this)) { if (this.alpha <= 0) { var index = Circle.pool.indexOf(this); Circle.pool.splice(index, 1); //console.log(Circle.pool.length); return; } else { this.alpha -= 0.04; return; } } var pp = this.sp + (Date.now() - this.borntime) % this.aliveTime / this.aliveTime; if (pp >= 1) pp -= this.sp; //console.log(pp) var e; var m = 4; var n = 1 / 2; var t = Math.ceil(pp * m); if (t <= 1) { e = -m * m * pp * pp + 1; } else { e = -4 * m * m * Math.pow(n, t - 1) * Math.pow(pp - (2 * t - 1) / (2 * m), 2) + Math.pow(n, t - 1); } this.r = this.sr - this.sr * e; } //在屏幕上绘制圆形 Circle.prototype.render = function(ctx) { ctx.beginPath(); ctx.fillStyle = this.fillcolor; ctx.arc(this.cx, this.cy, this.r, 0, Math.PI * 2, false); ctx.closePath(); ctx.fill(); } for (var i = 0; i < 30; i++) { new Circle(Math.random() * cw, Math.random() * ch, Math.random() * 20, Math.random() * 5000); } //开始进行动画 function draw() { ctx.clearRect(0, 0, cw, ch); Circle.pool.forEach(function(e) { e.update(); e.render(ctx); }); requestAnimationFrame(draw); } draw(); canvas.addEventListener('mousemove', function(e) { new Circle(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, Math.random() * 20, Math.random() * 5000); }); window.addEventListener('resize', function() { cw = canvas.width = window.innerWidth; ch = canvas.height = window.innerHeight; });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>canvas跟随鼠标-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:使用HTML5 canvas画布,制作跟随鼠标动态生成的动画特效,使用原生Javript
鼠标移入放大
登录验证码验证
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
601
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值