使用css和js实现鼠标拖尾特效（七彩泡泡）

（此文章是转载，由于急于使用忘记作者链接。作者看到后可提供出处。）

一 css样式

<style>*{margin:0;padding:0;}body{overflow:hidden;}#canvas{background-color:black;}
</style>

二 html里添加canvas：

<canvas id="canvas" ></canvas>

三 js：

<script>
var canvas = document.querySelector('#canvas');
var ctx = canvas.getContext("2d");
var starlist = [];
function init(){canvas.width = window.innerWidth;canvas.height = window.innerHeight;
}
init();
window.onresize = init;
canvas.addEventListener('mousemove',function(e){starlist.push(new Star(e.offsetX,e.offsetY));console.log(starlist)
})
function random(min,max){return Math.floor((max-min)*Math.random()+ min);
}
function Star(x,y){this.x = x;this.y = y;this.vx = (Math.random()-0.5)*2.5;this.vy = (Math.random()-0.5)*2.5;this.color = 'rgb('+random(0,200)+','+random(0,200)+','+random(0,200)+')';this.a = 1;console.log(this.color);this.draw();
}
Star.prototype={draw:function(){ctx.beginPath();ctx.fillStyle = this.color;ctx.globalCompositeOperation='lighter'ctx.globalAlpha= this.a;ctx.arc(this.x,this.y,30,0,Math.PI*2,false);ctx.fill();this.updata();},updata(){this.x+=this.vx;this.y+=this.vy;this.a*=.98;}
}
console.log(new Star(10,20));
function render(){ctx.clearRect(0,0,canvas.width,canvas.height)starlist.forEach((item,i)=>{item.draw();if(item.a<0.05){starlist.splice(i,1);}})requestAnimationFrame(render);
}
render();
</script>

四实现效果：

使用css和js实现鼠标拖尾特效（七彩泡泡）相关推荐

使用css和js实现鼠标拖尾特效
一实现步骤解析: 1.这原本是一个鼠标后面跟随一串英文字母的效果, 2.后来我就想,运用随机数字母的颜色做成彩色的, 3.并且每一个字母的色彩是随机分配而不是我自己手动填写的. 二 css: 1.为 ...
纯js实现鼠标拖尾效果（好玩又简单，一学就会）
js特效-鼠标滑动的拖尾效果 <script>//鼠标移动事件(document范围内移动)document.onmousemove=function(event){//1.创建divva ...
用js编写,鼠标拖拽特效。
盒子的位置(left和top值)= 鼠标的位置(left和top值)- 鼠标按下时与盒子之间的距离(left和top值). 编写HTML,设计弹框用于实现拖拽特效. 为拖拽条添加mousedown事件 ...
javascript鼠标拖尾特效
鼠标特效需要使用定时器setTimeout在固定时间生成节点,删除节点,生成的节点赋予随机的宽高,随机颜色,使每个特效节点都看起来不一样注意:生成的节点需要设置绝对定位,使其脱离文档流,不影响页面中 ...
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效特效预览图什么是贝塞尔曲线? 百度百科: 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图 ...
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效（富文本编辑器）
特效预览图什么是贝塞尔曲线? 百度百科: 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线.一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段 ...
html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
processing制作熊猫头像跟随鼠标拖尾
先上效果图: 我演示时电脑有点卡所以看着有些顺畅,你的电脑应该是没有问题的. processing实现跟随鼠标拖尾其实不难,在这篇文章中我将介绍图案封装.封装图案整体缩放.数组的创建方法以及一些逻辑处 ...
python-tkinter（7）实现各种个样的撩妹鼠标拖尾
python-tkinter(7) 实现各种个样的撩妹鼠标拖尾系统的拖尾已经无法满足我们了,女朋友叫你把鼠标拖尾换成她的照片,让你时时刻刻都可以看见她,这个要求你答不答应. 当然,这个要求还是可以满 ...

使用css和js实现鼠标拖尾特效（七彩泡泡）

（此文章是转载，由于急于使用忘记作者链接。作者看到后可提供出处。）

使用css和js实现鼠标拖尾特效（七彩泡泡）相关推荐

最新文章

热门文章

使用css和js实现鼠标拖尾特效（七彩泡泡）

（ 此文章是转载，由于急于使用忘记作者链接。作者看到后可提供出处。）

使用css和js实现鼠标拖尾特效（七彩泡泡）相关推荐

最新文章

热门文章

（此文章是转载，由于急于使用忘记作者链接。作者看到后可提供出处。）