您正在使用 IPV4 [18.97.9.175] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会      

【腾讯云】2核2G云服务器新老同享 99元/年,续费同价,云服务器3年机/5年机限时抢购,低至 2.5折      
[公益] 地球是我家,绿化靠大家      
2024年 冬至节 012
2025年 高 考 180
2025年 元 旦 023
2025年 春 节 051
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
使用JS实现一个跟随鼠标移动洒落的星星特效
内容摘要: window.addEventListener('load',()={//获取画布varcanvas=document.querySelector('#canvas');varctx=canvas.getContext('2d');//让画布自适应窗口大小,这个复制即可window.onresize=resizeCanvas;functionresizeCa......
window.addEventListener('load',()=>{

//获取画布

varcanvas=document.querySelector("#canvas");

varctx=canvas.getContext("2d");

//让画布自适应窗口大小,这个复制即可

window.onresize=resizeCanvas;

functionresizeCanvas(){

canvas.width=window.innerWidth;

canvas.height=window.innerHeight;

}

resizeCanvas();

//给画布css样式,固定定位,且阻止用户的鼠标事件

canvas.style.cssText=`

position:fixed;

z-index:1000;

pointer-events:none;

`

//定义数组,arr存放每个小星星的信息,colour为颜色数组,存几个好看的颜色

vararr=[];

varcolours=["#ffff00","#66ffff","#3399ff","#99ff00","#ff9900"];

//绑定鼠标移动事件

window.addEventListener('mousemove',e=>{

//每移动触发一次事件给arr数组添加一个星星

arr.push({

//x是初始横坐标

x:e.clientX,

//y是初始纵坐标

y:e.clientY,

//r是星星里面那个小圆半径,哪来的小圆等会说

r:Math.random()*0.5+1.5,

//运动时旋转的角度

td:Math.random()*4-2,

//X轴移动距离

dx:Math.random()*2-1,

//y轴移动距离

dy:Math.random()*1+1,

//初始的旋转角度

rot:Math.random()*90+90,

//颜色

color:colours[Math.floor(Math.random()*colours.length)]

});

})

//封装绘制一个五角星函数

//x是圆心横坐标,y是圆心纵坐标,其实就是鼠标位置(x,y)

//r是里面小圆半径,l是大圆半径

//rot是初始旋转角度

functionstar(x,y,r,l,rot){

ctx.beginPath();

//循环5次,因为5个点

for(leti=0;i<5;i++){

//先绘制小圆上一个点

ctx.lineTo(Math.cos((18+i*72-rot)*Math.PI/180)*r+x,

-Math.sin((18+i*72-rot)*Math.PI/180)*r+y);

//连线到大圆上一个点

ctx.lineTo(Math.cos((54+i*72-rot)*Math.PI/180)*l+x

,-Math.sin((54+i*72-rot)*Math.PI/180)*l+y);

}

ctx.closePath();

}

//绘制一堆星星

functiondraw(){

//循环数组

for(leti=0;i<arr.length;i++){

lettemp=arr[i];

//调用绘制一个星星函数

star(temp.x,temp.y,temp.r,temp.r*3,temp.rot);

//星星颜色

ctx.fillStyle=temp.color;

//星星边框颜色

ctx.strokeStyle=temp.color;

//线宽度

ctx.lineWidth=0.1;

//角有弧度

ctx.lineJoin="round";

//填充

ctx.fill();

//绘制路径

ctx.stroke();

}

}

//更新动画

functionupdate(){

//循环数组

for(leti=0;i<arr.length;i++){

//x坐标+dx移动距离

arr[i].x+=arr[i].dx;

//y坐标+dy移动距离

arr[i].y+=arr[i].dy;

//加上旋转角度

arr[i].rot+=arr[i].td;

//半径慢慢减小

arr[i].r-=0.015;

//当半径小于0时

if(arr[i].r<0){

//删除该星星

arr.splice(i,1);

}

}

}

//设置定时器

setInterval(()=>{

//清屏

ctx.clearRect(0,0,canvas.width,canvas.height);

//绘制

draw();

//更新

update();

},20)

})

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:跳舞的小人鼠标跟随事件效果实现

 

下一篇:JavaScript基于Ajax实现不刷新在网页上动态显示文

发布日期:2023/11/16
手机扫二维码直达本页
发布时间:14:46:11
点  击:18
录  入:伊伊
相关文章
Baidu
YiJiaCMS 7.5.5 build241121(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....