html+css+js实现canvas跟随鼠标的小圆特效源码
短信预约 -IT技能 免费直播动态提醒
效果（源码在最后）：
实现：
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>
var canvas = document.querySelector("#draw");
var yuan = canvas.getContext("2d");
window.onresize=resizeCanvas;
function resizeCanvas(){
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
}
resizeCanvas();
var arr = [];
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()})`
this.xZou = parseInt(Math.random()*10-5);
this.yZou = parseInt(Math.random()*10);
arr.push(this);
}
circle.prototype.updated = function() {
this.x = this.x + this.xZou ;
this.y = this.y + this.yZou ;
this.r = this.r - 0.1 ;
if(this.r<0){
this.remove();
}
}
circle.prototype.remove = function (){
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){
new circle(e.offsetX,e.offsetY,Math.random()*15);
})
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>
var canvas = document.querySelector("#draw");
var yuan = canvas.getContext("2d");
window.onresize=resizeCanvas;
function resizeCanvas(){
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
}
resizeCanvas();
var arr = [];
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()})`
this.xZou = parseInt(Math.random()*10-5);
this.yZou = parseInt(Math.random()*10);
arr.push(this);
}
circle.prototype.updated = function() {
this.x = this.x + this.xZou ;
this.y = this.y + this.yZou ;
this.r = this.r - 0.1 ;
if(this.r<0){
this.remove();
}
}
circle.prototype.remove = function (){
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){
new circle(e.offsetX,e.offsetY,Math.random()*15);
})
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跟随鼠标的小圆内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
