html+css+js實現(xiàn)canvas跟隨鼠標(biāo)的小圓特效源碼
更新時間：2021年03月15日 11:30:21 作者：北極光之夜。
這篇文章主要介紹了html+css+js實現(xiàn)canvas跟隨鼠標(biāo)的小圓特效源碼,本文給大家介紹的非常詳細(xì)，對大家的學(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部分，詳細(xì)看注釋 ：
<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可得隨機正負(fù)數(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可得隨機正負(fù)數(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)文章
在前端開發(fā)的工作中，總是會涉及到一些JavaScript和CSS信息交互的內(nèi)容。2010-02-02
javascript 函數(shù)式編程...2007-08-08
用javascript實現(xiàn)畫板的代碼...2007-09-09
前端實現(xiàn)列表多條件查詢/搜索功能兩種實現(xiàn)方法
我們在開發(fā)過程中,特別是數(shù)據(jù)庫系統(tǒng)的開發(fā)中經(jīng)常會遇到多條件的查詢狀況這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)列表多條件查詢/搜索功能的兩種實現(xiàn)方法,需要的朋友可以參考下2024-08-08
有時因某種特殊需要，會獲取span里面的值，下面有個不錯的示例，大家可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了ionic隱藏tabs的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家介紹了全解跨域請求問題處理方法及分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2023-07-07
JS實現(xiàn)把一個頁面層數(shù)據(jù)傳遞到另一個頁面的兩種方式
這篇文章主要介紹了JS實現(xiàn)把一個頁面層數(shù)據(jù)傳遞到另一個頁面的方式,本文給大家提供了兩種方式，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了微信公眾平臺開發(fā)教程（五）詳解自定義菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-12-12
超強的IE背景圖片閃爍(抖動)的解決辦法...2007-09-09