canvas实现鼠标跟随特效

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{background-color: rgb(72, 75, 122);}h1{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 5em;font-family: 'fangsong';color: rgb(38, 205, 247);}</style>
</head>
<body><h1>鼠标跟随特效</h1><canvas  id="draw" style=" position: fixed; display: block;">       当前浏览器不支持Canvas，请更换浏览器后再试</canvas><script>/* 首先获取canvas画布 */var canvas = document.querySelector("#draw");var yuan = canvas.getContext("2d");      /* 绑定窗口大小发生改变事件，让canvas随时铺满浏览器可视区 */window.onresize=resizeCanvas;function resizeCanvas(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;}resizeCanvas(); /* 定义数组，存下面触发移动事件时产生的小圆 */var arr = [];/* 绘制小圆形的方法，x与y是初始位置，r是圆半径 */function circle (x,y,r){this.x=x;this.y=y;this.r=r;/* 得一个随机颜色 */this.color = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`/* 圆的移动方向，random函数为随机返回一个0.0到1.0的数，x可得随机正负数，y为随机正数 */this.xZou = parseInt(Math.random()*10-5);this.yZou = parseInt(Math.random()*10);      /* 向arr数组末尾添加这个元素 */    arr.push(this);}/* 更新圆形的方法 */circle.prototype.updated = function() {/* x和y增加，呈现圆形一直走 */this.x = this.x + this.xZou ;this.y = this.y + this.yZou ;/* 半径慢慢减少 */this.r = this.r - 0.1 ;/* 当半径小于1清除这个圆 */if(this.r<0){this.remove();}}/* 删除小圆的函数 */circle.prototype.remove = function (){/* 遍历数组，找到和调用这个函数相同的圆后用splice函数删除 */for(let i=0;i<arr.length;i++){if(this==arr[i]){arr.splice(i,1);}}}/* 渲染小圆 */circle.prototype.render = function(){yuan.beginPath();yuan.arc(this.x,this.y,this.r,0,2*3.14,false);yuan.fillStyle = this.color;yuan.fill();}/* 给画布绑定鼠标经过事件 */       canvas.addEventListener('mousemove',function(e){/* 传入x，y，r。offsetX距离左侧距离，..， */new  circle(e.offsetX,e.offsetY,Math.random()*15); })/* 定时器渲染小圆，开始动画 ，30毫秒一次 */setInterval(function(){/* 清屏 */yuan.clearRect(0,0,canvas.width,canvas.height);/* 循环数组，给每个小圆更新和渲染 */for(let i=0;i<arr.length;i++){/* 更新 */arr[i].updated();/* 如果浏览器支持，则渲染 */if(arr[i].render()){arr[i].render();}}},30)</script>
</body>
</html>

效果如下：

canvas实现鼠标跟随特效相关推荐

前端--鼠标跟随特效
鼠标跟随特效个人原创,转载请注明出处里面的内容涉及:Element.setAttribute(),document.createElement(),document.createTextNode( ...
php鼠标跟随特效,JS实现鼠标跟随特效
这次给大家带来JS实现鼠标跟随特效,JS实现鼠标跟随特效的注意事项有哪些,下面就是实战案例,一起来看一下. 以下是经过小编测试后的全部代码: 鼠标跟随十字JS特效代码 // var ox = docu ...
鼠标跟随效果html,javascript 鼠标跟随特效代码及理解
javascript 鼠标跟随特效 *{ margin: 0; padding: 0; } body{ height: 1000px; } div{ width: 50px; height: 50px ...
html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例
本文实例讲述了JS实现的简单鼠标跟随DiV层效果.分享给大家供大家参考,具体如下: 这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动 ...
php鼠标跟随特效,原生js实现鼠标跟随效果
鼠标跟随效果 *{margin: 0;padding: 0;} img{position:absolute;top:0;left:0;} (function(window){ // 获取对象 var ...
JS特效——鼠标跟随特效——动态背景线条跟随鼠标移动
<script>!function(){function n(n,e,t){return n.getAttribute(e ...
js鼠标跟随特效鼠标滑过出现小星星动画
页面代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title& ...
html++鼠标跟随动画,5分钟实现Canvas鼠标跟随动画背景
关于Canvas制作炫酷背景,我会在git上不定时去更新,并会附上详细的解析,如果有喜欢的话,可以到git上瞧瞧前言相信很多前端小白都看过这样的背景动画,也好奇如何去实现这种效果!将这种效果应用到 ...
ES6与canvas实现鼠标小球跟随效果
最近闲来无聊,看了下ES6的语法,结合canvas实现了动画特效--随着鼠标的移动,会有小球跟随且自动消失的动画. 首先,html部分,目前就一个canvas标签. 1 <canvas id=& ...

canvas实现鼠标跟随特效

canvas实现鼠标跟随特效相关推荐

最新文章

热门文章