介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title> & lt;/title>
,& lt; style>
,body {
,保证金:0;
,溢出:隐藏;
,}
,# canvas {
背景:大敌;# 000;
,}
,& lt;/style>
& lt;/head>
& lt; body>
,& lt; canvas id=癱anvas"祝辞& lt;/canvas>
,& lt; script>
,var canvas =, . getelementbyid(& # 39;帆布# 39;);
,var context =, canvas.getContext (& # 39; 2 d # 39;);
,var circleList =, [];=,,canvas.width window.innerWidth;=,,canvas.height window.innerHeight;
,canvas.addEventListener (& # 39; mousemove& # 39;,, function (e), {
,//将对象推到数组中,画出来的彩色小点可以看作每一个对象中记录着信息,然后存在数组中
,circleList.push (new 圆(e.clientX, e.clientY));
,})
,//x到y取之间随机数:Math.round (math . random () * (x) + x),包括y
,function 随机(最小值,最大值),{
,return Math.round (math . random (), *, (max 安康;分钟),+,min);
,}
,function 圆(x, y), {=,this.x x;
y=, this.y ;
,this.vx =, (math . random(),今天早上,0.5),*,3,,//随机出来一个正数,或者负数乘3是为了让速度变得大一点
,this.vy =, (math . random(),今天早上,0.5),*,3;=,this.color & # 39; rgb(& # 39;, +,随机(0,255),+,& # 39;,& # 39;,+,随机(0,255),+,& # 39;,& # 39;,+,随机(0,255),+,& # 39;)& # 39;;=,this.a 1;,//,初始透明度
,this.draw ();
,}
,Circle.prototype =, {
,画(){
,context.beginPath ();=,,context.fillStyle this.color;=,context.globalCompositeOperation & # 39;轻# 39;;=,,context.globalAlpha this.a;,//全局透明度
,context.arc (this.x, this.y,, 30岁,0,,Math.PI *, 2,假);
,context.fill ();
,this.update ();
},
,更新(){
,//根据速度更新每一个小圆的位置
+=,this.x this.vx;
+=,this.y this.vy;
,this.a *=, 0.98;
,}
,}
,function 使(),{
,//把原来的内容区域清除掉
,context.clearRect (0, 0, canvas.width,, canvas.height);
,circleList.forEach (function (避署,i), {
,ele.draw ();
,if (ele.a & lt;, 0.05), {
circleList.splice才能(我,,1);
,}
,});
,requestAnimationFrame(渲染);,//动画,会根据浏览器的刷新频率更新动画
,}
,呈现();
,& lt;/script>
& lt;/body>
& lt;/html>
这期内容当中小编将会给大家带来有关怎么在JavaScript中使用帆布实现一个跟随鼠标事件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
上述就是小编为大家分享的怎么在JavaScript中使用帆布实现一个跟随鼠标事件了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。
