html+css+js實現(xiàn)canvas跟隨鼠標(biāo)的小圓特效源碼
更新時間：2021年03月15日 11:30:21 作者：北極光之夜。
這篇文章主要介紹了html+css+js實現(xiàn)canvas跟隨鼠標(biāo)的小圓特效源碼,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
效果（源碼在最后）：
實現(xiàn)：
1.定義標(biāo)簽：
<h1>北極光之夜</h1> <canvas id="draw" style=" position: fixed; display: block;"> 當(dāng)前瀏覽器不支持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");
/* 綁定窗口大小發(fā)生改變事件，讓canvas隨時鋪滿瀏覽器可視區(qū) */
window.onresize=resizeCanvas;
function resizeCanvas(){
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
}
resizeCanvas();
/* 定義數(shù)組，存下面觸發(fā)移動事件時產(chǎn)生的小圓 */
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函數(shù)為隨機返回一個0.0到1.0的數(shù)，x可得隨機正負數(shù)，y為隨機正數(shù) */
this.xZou = parseInt(Math.random()*10-5);
this.yZou = parseInt(Math.random()*10);
/* 向arr數(shù)組末尾添加這個元素 */
arr.push(this);
}
/* 更新圓形的方法 */
circle.prototype.updated = function() {
/* x和y增加，呈現(xiàn)圓形一直走 */
this.x = this.x + this.xZou ;
this.y = this.y + this.yZou ;
/* 半徑慢慢減少 */
this.r = this.r - 0.1 ;
/* 當(dāng)半徑小于1清除這個圓 */
if(this.r<0){
this.remove();
}
}
/* 刪除小圓的函數(shù) */
circle.prototype.remove = function (){
/* 遍歷數(shù)組，找到和調(diào)用這個函數(shù)相同的圓后用splice函數(shù)刪除 */
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();
}
/* 給畫布綁定鼠標(biāo)經(jīng)過事件 */
canvas.addEventListener('mousemove',function(e){
/* 傳入x，y，r。offsetX距離左側(cè)距離，..， */
new circle(e.offsetX,e.offsetY,Math.random()*15);
})
/* 定時器渲染小圓，開始動畫 ，30毫秒一次 */
setInterval(function(){
/* 清屏 */
yuan.clearRect(0,0,canvas.width,canvas.height);
/* 循環(huán)數(shù)組，給每個小圓更新和渲染 */
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;">
當(dāng)前瀏覽器不支持Canvas，請更換瀏覽器后再試
</canvas>
<script>
/* 首先獲取canvas畫布 */
var canvas = document.querySelector("#draw");
var yuan = canvas.getContext("2d");
/* 綁定窗口大小發(fā)生改變事件，讓canvas隨時鋪滿瀏覽器可視區(qū) */
window.onresize=resizeCanvas;
function resizeCanvas(){
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
}
resizeCanvas();
/* 定義數(shù)組，存下面觸發(fā)移動事件時產(chǎn)生的小圓 */
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函數(shù)為隨機返回一個0.0到1.0的數(shù)，x可得隨機正負數(shù)，y為隨機正數(shù) */
this.xZou = parseInt(Math.random()*10-5);
this.yZou = parseInt(Math.random()*10);
/* 向arr數(shù)組末尾添加這個元素 */
arr.push(this);
}
/* 更新圓形的方法 */
circle.prototype.updated = function() {
/* x和y增加，呈現(xiàn)圓形一直走 */
this.x = this.x + this.xZou ;
this.y = this.y + this.yZou ;
/* 半徑慢慢減少 */
this.r = this.r - 0.1 ;
/* 當(dāng)半徑小于1清除這個圓 */
if(this.r<0){
this.remove();
}
}
/* 刪除小圓的函數(shù) */
circle.prototype.remove = function (){
/* 遍歷數(shù)組，找到和調(diào)用這個函數(shù)相同的圓后用splice函數(shù)刪除 */
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();
}
/* 給畫布綁定鼠標(biāo)經(jīng)過事件 */
canvas.addEventListener('mousemove',function(e){
/* 傳入x，y，r。offsetX距離左側(cè)距離，..， */
new circle(e.offsetX,e.offsetY,Math.random()*15);
})
/* 定時器渲染小圓，開始動畫 ，30毫秒一次 */
setInterval(function(){
/* 清屏 */
yuan.clearRect(0,0,canvas.width,canvas.height);
/* 循環(huán)數(shù)組，給每個小圓更新和渲染 */
for(let i=0;i<arr.length;i++){
/* 更新 */
arr[i].updated();
/* 如果瀏覽器支持，則渲染 */
if(arr[i].render()){
arr[i].render();
}
}
},30)
</script>
</body>
</html>
其它：
今日三省吾身：安逸的生活沒意思，充滿挑戰(zhàn)，取得勝利，才是生命真諦。
到此這篇關(guān)于html+css+js實現(xiàn)canvas跟隨鼠標(biāo)的小圓特效源碼的文章就介紹到這了,更多相關(guān)canvas跟隨鼠標(biāo)的小圓內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript數(shù)組_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了JavaScript數(shù)組的相關(guān)知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-06-06
模塊化簡單來說就是將一個完整的長篇代碼文件根據(jù)功能進行劃分成幾個文件，這些文件各自負責(zé)一個獨立的功能，各個文件組合起來實現(xiàn)一個完整的大功能，這就是模塊化，每個負責(zé)獨立功能的文件就是模塊。2021-05-05
本文為大家詳細介紹下JSF中confirm彈出框的使用方法，感興趣的朋友可以參考下2014-01-01
有人說喜歡一個人，沒必要了解她的過去，然而想讀懂一個人，卻需要了解她的過去。2011-01-01
我們先看一個關(guān)于Javascript利用循環(huán)綁定事件的例子2008-10-10
layui的表單驗證支持ajax判斷用戶名是否重復(fù)的實例
今天小編就為大家分享一篇layui的表單驗證支持ajax判斷用戶名是否重復(fù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
ES6 Promise基礎(chǔ)用法(resolve、reject、then、catch,a
Promise是JavaScript中處理異步操作的對象,它有三種狀態(tài)：Pending、Fulfilled、Rejected,使用new Promise創(chuàng)建Promise對象,通過resolve和reject改變狀態(tài),then和catch方法用于處理成功和失敗的結(jié)果,本文介紹ES6 Promise用法,感興趣的朋友一起看看吧2024-09-09
離開當(dāng)前頁面前使用js判斷條件提示是否要離開頁面
這篇文章主要介紹了離開當(dāng)前頁面前如何使用js判斷條件提示是否要離開頁面,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細介紹了用javascript實現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JSX在render函數(shù)中的應(yīng)用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09