一、实现效果

二、代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>canvas--again</title><style>* {margin: 0;padding: 0;overflow: hidden;}html,body {width: 100%;height: 100%;/* background: linear-gradient(to top, palevioletred 0%, #fff 100%); */background: no-repeat linear-gradient(to bottom, #011a39 0%, #009d7f 100%);}</style>
</head>
<body><canvas id="canvas"></canvas>
</body>
<script>(function(win, doc) {const maxW = win.innerWidth;const maxH = win.innerHeight;const maxSize = 5;const minSize = 1;let isMoving = false;let timer = null;let canvas = doc.getElementById('canvas');canvas.width = maxW;canvas.height = maxH;let ctx = canvas.getContext('2d');let stars = [];      // 存放作为背景使用的星星let move_stars = []; // 存放鼠标移动时绘制的星星function CanvasStar(num) {this.num = num;};CanvasStar.prototype = {render() {for (let i = 0; i < this.num; i++) {let alpha = Math.random() + 0.1;stars[i] = new Star(i, getOneRandom(maxW), getOneRandom(maxH), getOneRandom(maxSize, minSize), true, alpha);}animate();}};function Star(id, x, y, r, isCache, dot_alpha) {this.id = id;this.x = x;this.y = y;this.r = r;this.dot_alpha = dot_alpha;this.show = .5;    // 作用：控制 鼠标绘制点的隐藏this.direct = getOneRandom(180) + 180;this.isCache = isCache;this.cacheCanvas = doc.createElement('canvas');this.ctx_cache = this.cacheCanvas.getContext('2d');if(isCache) {this.cache();}};Star.prototype = {draw() {// 绘制一个Starif(!this.isCache) {let alpha = Math.random() + 0.1;ctx.save();ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);ctx.closePath();ctx.shadowColor = '#fff';ctx.shadowBlur = 2 * this.r;ctx.fillStyle = `rgba(255, 255, 255, ${ this.dot_alpha })`;ctx.fill();ctx.restore();}else {ctx.drawImage(this.cacheCanvas, this.x - 3 * this.r, this.y - 3 * this.r)}},move() {this.y -= 0.25;if(this.y < -10) {this.y = maxH + 10;}this.draw();},// 使鼠标绘制的点抖动起来shake(arr) {this.show -= 0.01;if(this.show < 0) {return;}let speed = .5;this.x += Math.cos(this.direct * Math.PI / 180) * speed;this.y += Math.sin(this.direct * Math.PI / 180) * speed;this.draw();this.link();},link() {if(!this.id) return;let len = move_stars.length;// 关键思想：取当前id，之前的4个点，每绘制一次就向前取4个点，以此类推// 而不是move_stars最后的四个点，否则的话只有最后几个点会被连接起来let arr = move_stars.slice(this.id - 3, this.id);let endIdx = arr.length - 1;ctx.save();for(let i = endIdx; i >= 0; i--) {if(i == endIdx && !!arr[endIdx]) {ctx.moveTo(arr[endIdx].x, arr[endIdx].y);ctx.beginPath();ctx.lineTo(this.x, this.y);}if(i != endIdx && !!arr[i] && arr[i].show > 0) ctx.lineTo(arr[i].x, arr[i].y);}ctx.closePath();ctx.strokeStyle = 'rgba(255, 255, 255, 0.125)';ctx.stroke();ctx.restore();},cache() {this.cacheCanvas.width = 6 * this.r;this.cacheCanvas.height = 6 * this.r;this.ctx_cache.save();this.ctx_cache.beginPath();this.ctx_cache.arc(this.r * 3, this.r * 3, this.r, 0, 2 * Math.PI, false);this.ctx_cache.closePath();this.ctx_cache.shadowColor = '#fff';this.ctx_cache.shadowBlur = 2 * this.r;this.ctx_cache.fillStyle = `rgba(255, 255, 255, ${this.dot_alpha})`;this.ctx_cache.fill();this.ctx_cache.restore();}};// 动画function animate() {ctx.clearRect(0, 0, maxW, maxH);let len = stars.length;for(let i = 0; i < len; i++) {stars[i].move();}let len2 = move_stars.length;if(isMoving) {for(let i = 0; i < len2; i++) {if(move_stars[i]) move_stars[i].shake(move_stars);}}else {move_stars = []}requestAnimationFrame(animate);};// 获取区间内的随机数function getOneRandom(max, min = 0) {return Math.floor(Math.random() * (max - min) + min);};// 获取正负号function getSign() {return Math.random() > .5 ? -1 : 1;};// 鼠标移动事件doc.addEventListener('mousemove', function(e) {let x = e.clientX, y = e.clientY;// 控制绘制密度 以及点之间的距离    两个重要的点// 密度是控制绘制的数量     dis_x = Math.abs(x - pre_star.x);// 距离是在已绘制的点基础上、控制点的间距// 控制绘制密度 和 控制点之间的距离  不是一个功能哦（需要实际操作去体会， 文字很难表述~.~）// 没有控制距离的话 绘制的图形，太规则了，不够分散    x = x + getSign() * getOneRandom(50)let len = move_stars.length;let dis_x, dis_y;if(!len) {move_stars.push( new Star(len, x, y, getOneRandom(maxSize, 3), true, 1) );}if(move_stars[len - 1]) {// 当前的星还没有push到move_stars里，所以上个星是move_stars[len - 1]let pre_star = move_stars[len - 1];if(pre_star) {dis_x = Math.abs(x - pre_star.x);dis_y = Math.abs(y - pre_star.y);}x = x + getSign() * getOneRandom(50);y = y + getSign() * getOneRandom(50);if(dis_x > 5 && dis_y > 5) move_stars.push( new Star(len, x, y, getOneRandom(maxSize, minSize), true, 1) );}isMoving = true;clearInterval(timer);   // 清除上一次的定时器（此时还没触发）timer = setInterval(function() {isMoving = false;clearInterval(timer);    // 鼠标停止再清除下定时器}, 500)}, false);window.CanvasStar = CanvasStar;})(window, document);let canvasStar = new CanvasStar(200);canvasStar.render();
</script><script>
/**小本本* 疑问：*   1. clientX、layerX、offsetX、pageX、screenX、x 的区别？
*/
</script>
</html>

❤ ❤分享一个WEB前端canvas鼠标滑过星空背景特效超好看❤ ❤相关推荐

canvas鼠标移动动态星空背景特效
在网上发现了一个挺好玩的canvas背景特效,先放上效果图. 这个可以作为背景,里面是直线匀速运动的散点,当两个点直接小于一定距离时会通过canvas生成一条线相连接. 而且当鼠标移入时,鼠标指针一定 ...
html5星空效果图,HTML5 canvas炫酷星空背景特效
jquery-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件.这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动. 使用方法 ...
想成为一个Web前端开发工程师，需要掌握哪些知识？
前端工程师已经成为目前互联网企业极具竞争力的人才,为了招聘到优秀的Web前端开发工程师,企业不断的提升薪资水平.因此,有越来越多的人加入到了学习Web前端行列.那么,想成为一名web前端开发工程师需要 ...
想成为一个Web前端开发工程师，需要掌握的详细知识总结
前端工程师已经成为目前互联网企业极具竞争力的人才,企业不断提升薪资水平为了招聘到优秀的Web前端开发工程师.因此,越来越多的人想要学习Web前端.那么呢?Web前端的学习路线是什么? 想成为一个Web ...
推荐一个Web前端程序员必须要吃透的书籍！
随着互联网时代的发展,Web进入2.0时代,前端开发的岗位逐渐独立出来,大量的前端程序员工资和技术水平飙升.前端框架层出不穷,新技术不断更新,作为前端的程序员也是倍感吃力.但为了高薪,每一个前端开发者 ...
html给文字加动态效果,20种配合场景的CSS3鼠标滑过文字动画特效
这是一组非常有创意的配合场景使用的CSS3鼠标滑过文字动画特效.这组鼠标滑过特效中,以20张不同的图片作为不同的场景,例如图片是一条公路,鼠标滑过这上面的文字时,就会在文字下边出现一条公路的动画效果. ...
css 鼠标滑过li变背景图,CSS定义鼠标滑过变换背景的导航菜单
我们经常看到的网站基本上都有导航菜单,有的网站看上去非常酷,鼠标一移动到上面自动改变颜色,这样的导航有两种方法可以实现:一种是鼠标经过图像,一种是CSS定义. 鼠标经过图像是把菜单做成两张文字相同但颜 ...
html鼠标背景特效,6种鼠标滑过按钮背景动画特效
插件描述:这是一组效果非常酷的鼠标滑过按钮背景动画特效.该特效中,当鼠标滑过按钮时,使用CSS3 animation来动画backgroundsize和backgroundposition属性,来制作 ...
html5 星空扩散效果,HTML5 canvas实现炫酷旋转银河系星空背景特效解析
简要教程这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构该旋转银河系星空背景特效的HTM ...

❤ ❤分享一个WEB前端canvas鼠标滑过星空背景特效超好看❤ ❤

一、实现效果

二、代码

❤ ❤分享一个WEB前端canvas鼠标滑过星空背景特效超好看❤ ❤相关推荐

最新文章

热门文章