html+css+js实现canvas跟随鼠标的小圆特效源码
效果（源码在最后）：
实现：
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跟随鼠标的小圆内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
javascript实现图片跟随鼠标移动效果的方法
本文实例讲述了javascript实现图片跟随鼠标移动效果的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片跟着鼠标走</title&g
-
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
本文实例讲述了原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=gbk> <title>www.jb51.net 粒子效果演示</title> <meta name="description" content="HTML5/canva
-
JS实现跟随鼠标的链接文字提示框效果
本文实例讲述了JS实现跟随鼠标的链接文字提示框效果.分享给大家供大家参考.具体如下: 这里使用JavaScript与CSS实现链接提示效果,不会改变你原来的链接结构,使用链接原有的title标签来实现,如果之前你使用有title标签,那你几乎只需把JS代码拷贝到你的网页中即可.你会发现,运行本效果后,鼠标在链接上移动的话,文字提示框会跟随鼠标而移动位置. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran
-
js实现精美的图片跟随鼠标效果实例
本文实例讲述了js实现精美的图片跟随鼠标效果实现方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>精美js鼠标跟随代码</title> </head> <body> <script> A=doc
-
js图片跟随鼠标移动代码
在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,在这里与大家分享下. 在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里,http://www.jb51.net/article/17266.htm. 我们用到的只有这个对象的两个属性,clientX与clientY,就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性,所以只
-
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta nam
-
html+css+js实现canvas跟随鼠标的小圆特效源码
效果(源码在最后): 实现: 1.定义标签: <h1>北极光之夜</h1> <canvas id="draw" style=" position: fixed; display: block;"> 当前浏览器不支持Canvas,请更换浏览器后再试 </canvas> 2. 文字的基本样式: h1{ position: absolute; top: 50%; left: 50%; transform: translate
-
使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化 效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 简单的气泡效果 </title> <style type="text
-
js实现文字跟随鼠标移动而移动的方法
本文实例讲述了js实现文字跟随鼠标移动而移动的方法.分享给大家供大家参考.具体分析如下: 这是一款非常简单的鼠标特性代码,在网页中移动鼠标的时候,后面跟着一串文字跟随者鼠标移动 复制代码 代码如下: <html> <head> <style type="text/css"> .spanstyle { COLOR: 000000; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY:
-
js实现图片跟随鼠标移动效果
本文实例为大家分享了js实现图片跟随鼠标移动效果的具体代码,供大家参考,具体内容如下 <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { width: 1000px; height: 600px; background: #cecece; margin: 20px auto; } img{ width: 5
-
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
先给大家展示下效果图,如果大家感觉还不错,请参考实现代码哦! HTML: <div class="container iden_top"> <ul> <li> <p class='iden_add_name'>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"&
-
jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）
ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示 源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"
-
JS库particles.js创建超炫背景粒子插件(附源码下载)
插件描述:particles.js用于创建粒子的轻量级 JavaScript 库. 查看 效果 源码下载 使用 加载 particles.js和配置粒子 <div id="particles-js"></div> <script src="particles.js"></script> app.js /* particlesJS.load(@dom-id, @path-json, @callba
-
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
效果图如下: 我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,它叫clipboard.js. 查看演示 下载源码 HTML 首先加载本地clipboard.js文件. 复制代码 代码如下: <script src="clipboard.min.js"></scri
-
jquery validate.js表单验证入门实例（附源码）
小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=