网站突然显示 建设中,wordpress 喜欢 插件,wordpress移机,免费建立个人网站凡科H5Cavas制作鼠标吸附彩色气泡。当鼠标在屏幕上移动的时候#xff0c;鼠标划过的区域会出现许多彩色气泡#xff0c;并且会自动消失。
效果演示 看了如此效果是不是心动的感觉呢#xff1f;#xff1f;#xff1f;
代码展示
!DOCTYPE html
htmlhea…H5Cavas制作鼠标吸附彩色气泡。当鼠标在屏幕上移动的时候鼠标划过的区域会出现许多彩色气泡并且会自动消失。
效果演示 看了如此效果是不是心动的感觉呢
代码展示
!DOCTYPE html
htmlheadmeta charsetutf-8 /title鼠标吸附彩色气泡/titlestyle* {margin: 0;padding: 0;}body {overflow: hidden;}#part {background-color: black;}/style/headbodycanvas idpart/canvas/bodyscriptvar canvas document.querySelector(#part);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;this.vy (Math.random() - 0.5) * 2;this.color rgb( random(0, 256) , random(0, 256) , random(0, 256) );this.a 1;console.log(this.color);this.draw();}Star.prototype {draw: function() {ctx.beginPath();ctx.fillStyle this.color;ctx.globalCompositeOperation lighterctx.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 * 0.98;}}console.log(new Star(100, 150));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/html
此效果能否激起你内心对Cavas的热爱呢
了解更多关注我哟
