html+css+js实现canvas跟随鼠标的小圆特效源码
更新时间：2021年3月15日 15:00 点击：2415
效果（源码在最后）：
实现：
1.定义标签：
<h1>北极光之夜</h1> <canvas id="draw" style=" position: fixed; display: block;"> 当前浏览器不支持Canvas，请更换浏览器后再试 </canvas>
2. 文字的基本样式：
h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 5em;
font-family: 'fangsong';
color: rgb(38, 205, 247);
}
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 居中对齐
3. js部分，详细看注释 ：
<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>
canvas链接
splice（）方法链接
random（）方法链接
push（）方法链接
resize事件链接
完整源码：
<!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>
其它：
今日三省吾身：安逸的生活没意思，充满挑战，取得胜利，才是生命真谛。
到此这篇关于html+css+js实现canvas跟随鼠标的小圆特效源码的文章就介绍到这了,更多相关canvas跟随鼠标的小圆内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
上一篇: 用js实现拼图小游戏
相关文章
- 这篇文章主要为大家详细介绍了js canvas实现滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-14
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
这篇文章主要介绍了JS基于ocanvas插件实现的简单画板效果,结合实例形式分析了ocanvas插件实现画板的相关技巧,并附代码demo源码供读者下载参考,需要的朋友可以参考下...2016-04-06JavaScript+html5 canvas绘制的小人效果
这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下...2016-01-29- 这篇文章主要给大家介绍了关于微信小程序对图片进行canvas压缩的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-12
- 这篇文章主要为大家详细介绍了js canvas仿支付宝芝麻信用分仪表盘,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-11-22
- 这篇文章主要为大家详细介绍了使用js和canvas实现时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-09-08
- 这篇文章主要为大家详细介绍了WPF InkCanvas绘制矩形和椭圆，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了Canvas实现放大镜效果完整案例分析(附代码),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
html+css+js实现canvas跟随鼠标的小圆特效源码
这篇文章主要介绍了html+css+js实现canvas跟随鼠标的小圆特效源码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-03-15- 这篇文章主要为大家详细介绍了原生js canvas实现鼠标跟随效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-02
- 这篇文章主要为大家详细介绍了unity3D实现三维物体跟随鼠标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了canvas绘制刮刮卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-07
- 这篇文章主要为大家详细介绍了js canvas实现圆形流水动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-04-19
- 这篇文章主要介绍了JS使用canvas技术模仿echarts柱状图，对canvas感兴趣的同学，可以参考下...2021-04-30
- 这篇文章主要介绍了JS+canvas五子棋人机对战实现步骤详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-05
- 对于生成缩略图一般做法是通过后端语言php等来生成，但是为了给服务器减压，我们或许可以从前端来着手，先生成好不同尺寸的缩略图，传给后端，而后端只需要将前端传过来的图片进行存储就好了...2020-10-03
HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)
这篇文章主要介绍了HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-08-25- 这篇文章主要为大家详细介绍了javascript利用canvas实现鼠标拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-07-24
- 本文给大家介绍基于JS+Canvas 实现下雨下雪效果，效果非常逼真，适应于各大网站，需要的朋友可以参考下...2016-05-20
JavaScript+html5 canvas制作的圆中圆效果实例
这篇文章主要介绍了JavaScript+html5 canvas制作的圆中圆效果,结合完整实例形式分析了基于JavaScript与html5 canvas技术实现的图形绘制与颜色随机填充技巧,需要的朋友可以参考下...2016-01-29