本文共 1722 字,大约阅读时间需要 5 分钟。
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{ ctx.clearRect(0,0,canvas.width,canvas.height); draw(); update(); },20)})
如在这引入,src写上文件在的路径:
如:
这样在你的网页就可以直接看到跟随鼠标移动的小星星效果了,如果需要解释代码意思和制作过程的留言,我可以下次出篇文章详细说说怎么做~
其它文章:
…等转载地址:http://rtir.baihongyu.com/