✩跟随鼠标移动的星星✩直接在页面引用✧(๑•̀ㅂ•́)و✧

举报
北极光之夜。 发表于 2021/04/24 00:04:20 2021/04/24
【摘要】 效果✩: 直接在你的页面引用方法✩: 1.新建一个名为 canvasStar.js的文件: 2.右键打开该 js 文件,把下面代码复制进去:window.addEventListener('load',()=>{ var canvas = document.querySelector("#canvas"); var ctx = canvas.getContext("2d"); ...

效果✩:

在这里插入图片描述

直接在你的页面引用方法✩:

1.新建一个名为 canvasStar.js的文件:

在这里插入图片描述

2.右键打开该 js 文件,把下面代码复制进去:

window.addEventListener('load',()=>{
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");      
    window.onresize=resizeCanvas;
    function resizeCanvas(){
       canvas.width=window.innerWidth;
       canvas.height=window.innerHeight;
    }
   
    resizeCanvas(); 
    canvas.style.cssText = `
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    `
    //
    var arr = [];
    var colours =["#ffff00","#66ffff","#3399ff","#99ff00","#ff9900"];
    
    //
    window.addEventListener('mousemove', e=>{
            
            arr.push({
                x:e.clientX,
                y:e.clientY,
                r:Math.random()*0.5+1.5,
                td:Math.random()*4-2,
                dx:Math.random()*2-1,
                dy:Math.random()*1+1,
                rot: Math.random()*90+90,
                color: colours[Math.floor(Math.random()*colours.length)]
            });
           
    })
    //
    function star(x,y,r,l,rot){
       ctx.beginPath();
        for(let i=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();   
    }
    //
    function draw(){
        for(let i=0;i<arr.length;i++){
            let temp = 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();
        }
    }
    
    //
    function update(){
        for(let i=0;i<arr.length;i++){
            arr[i].x += arr[i].dx;
            arr[i].y += arr[i].dy;
            arr[i].rot += arr[i].td;
            arr[i].r -= 0.015;
            if(arr[i].r<0){
                arr.splice(i,1);
            }
        }
    }
    
    
    setInterval(()=>{
        ctx.clearRect(0,0,canvas.width,canvas.height);
        draw();
        update();
    },20)
})

3. 在你想要的显示效果的页面插入该js文件:

如在这引入,src写上文件在的路径:
在这里插入图片描述

4.在body里添该加标签:

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

如:
在这里插入图片描述
以上就完成了~

总结:

这样在你的网页就可以直接看到跟随鼠标移动的小星星效果了~
在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200