鼠标吸附彩色气泡
H5Cavas制作鼠標吸附彩色氣泡。當鼠標在屏幕上移動的時候，鼠標劃過的區域會出現許多彩色氣泡，并且會自動消失。
效果演示
看了如此效果是不是心動的感覺呢？？？
代碼展示
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>鼠標吸附彩色氣泡</title><style>* {margin: 0;padding: 0;}body {overflow: hidden;}#part {background-color: black;}</style></head><body><canvas id="part"></canvas></body><script>var 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 = '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 *= 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的熱愛呢？？？
了解更多關注我喲！！！
總結
- 上一篇： HTML5 新特性
- 下一篇： IDEA 配置Tomcat