1. 程式人生 > 程式設計 >html+css+js實現canvas跟隨滑鼠的小圓特效原始碼

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(Mathttp://www.cppcns.com
h.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,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,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{
  http://www.cppcns.com position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,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");  
  /ldSPnE* 繫結視窗大小發生改變事件,讓canvas隨時鋪滿瀏覽器可視區 */
   window.onresize=resizeCanvas;
  function resizeCanvas(){
   canvas.width=window.innerWidth;
   canvas.height=window.innerHeight;
  }
  resizeCanvas(); 

  /* 定義陣列,存下面觸發移動事件時產生的小圓 */
  var arr = [];
  
  /* 繪製小圓形的方法,x與y是初始位置,r是圓半徑 */
  function circle (x,${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 (){
    /* 遍歷陣列,找到和呼叫這個函式相同的圓後用splwww.cppcns.comice函式刪除 */
   forhttp://www.cppcns.com(let i=0;i<arr.length;i++){
     if(this==arr[i])
     {
      arr.splice(i,30)

 </script>
</body>
</html>

其它:

今日三省吾身:安逸的生活沒意思,充滿挑戰,取得勝利,才是生命真諦。

到此這篇關於html+css+js實現canvas跟隨滑鼠的小圓特效原始碼的文章就介紹到這了,更多相關canvas跟隨滑鼠的小圓內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!