canvas跟随鼠标的小圆特效 html+css+js
【摘要】 效果（源码在最后）： 实现：1.定义标签： <h1>北极光之夜</h1> <canvas id="draw" style=" position: fixed; display: block;"> 当前浏览器不支持Canvas，请更换浏览器后再试 </canvas>2. 文字的基本样式：h1{ position: absolute; ...
效果（源码在最后）：
实现：
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>
其它：
下次见~
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）