原生js canvas實(shí)現(xiàn)鼠標(biāo)跟隨效果
更新時(shí)間:2020年08月02日 10:55:12 作者:Mr.王征
這篇文章主要為大家詳細(xì)介紹了原生js canvas實(shí)現(xiàn)鼠標(biāo)跟隨效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了canvas實(shí)現(xiàn)鼠標(biāo)跟隨效果的具體代碼,供大家參考,具體內(nèi)容如下
效果展示:
源碼展示:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas鼠標(biāo)跟隨效果(原生js實(shí)現(xiàn))</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> * { margin:0; padding:0; } body { overflow:hidden; } #myCanvas { background-color:#000; } </style> </head> <body> <canvas id="myCanvas"></canvas> <script> var myCanvas = document.getElementById('myCanvas'); var ctx = myCanvas.getContext("2d"); var starlist = []; function init() { // 設(shè)置canvas區(qū)域的范圍為整個(gè)頁面 myCanvas.width = window.innerWidth; myCanvas.height = window.innerHeight; }; init(); // 監(jiān)聽屏幕大小改變 重新為canvas大小賦值 window.onresize = init; // 當(dāng)鼠標(biāo)移動(dòng)時(shí) 將鼠標(biāo)坐標(biāo)傳入構(gòu)造函數(shù) 同時(shí)創(chuàng)建一個(gè)對(duì)象 myCanvas.addEventListener('mousemove', function(e) { // 將對(duì)象push到數(shù)組中,畫出來的彩色小點(diǎn)可以看作每一個(gè)對(duì)象中記錄著信息 然后存在數(shù)組中 starlist.push(new Star(e.offsetX, e.offsetY)); }); // 隨機(jī)數(shù)函數(shù) function random(min, max) { // 設(shè)置生成隨機(jī)數(shù)公式 return Math.floor((max - min) * Math.random() + min); }; // 構(gòu)造函數(shù) function Star(x, y) { // 將坐標(biāo)存在每一個(gè)點(diǎn)的對(duì)象中 this.x = x; this.y = y; // 設(shè)置隨機(jī)偏移量 this.vx = (Math.random() - 0.5) * 3; this.vy = (Math.random() - 0.5) * 3; this.color = 'rgb(' + random(0, 256) + ',' + random(0, 256) + ',' + random(0, 256) + ')'; // 初始透明度 this.a = 1; // 開始畫 this.draw(); } // 再star對(duì)象原型上封裝方法 Star.prototype = { // canvas根據(jù)數(shù)組中存在的每一個(gè)對(duì)象的小點(diǎn)信息開始畫 draw: function() { ctx.beginPath(); ctx.fillStyle = this.color; // 圖像覆蓋 顯示方式 lighter 會(huì)將覆蓋部分的顏色重疊顯示出來 ctx.globalCompositeOperation = 'lighter' ctx.globalAlpha = this.a; ctx.arc(this.x, this.y, 30, 0, Math.PI * 2, false); ctx.fill(); this.updata(); }, updata: function() { // 根據(jù)偏移量更新每一個(gè)小點(diǎn)的位置 this.x += this.vx; this.y += this.vy; // 透明度越來越小 this.a *= 0.98; } } // 渲染 function render() { // 每一次根據(jù)改變后數(shù)組中的元素進(jìn)行畫圓圈 把原來的內(nèi)容區(qū)域清除掉 ctx.clearRect(0, 0, myCanvas.width, myCanvas.height) // 根據(jù)存在數(shù)組中的每一位對(duì)象中的信息畫圓 starlist.forEach(function(ele, i) { ele.draw(); // 如果數(shù)組中存在透明度小的對(duì)象 ,給他去掉 效果展示逐漸消失 if (ele.a < 0.05) { starlist.splice(i, 1); } }); requestAnimationFrame(render); } render(); </script> <pre style="color:red"> 感: 最近貢獻(xiàn)一下我在教學(xué)中的小案例可以能給你一些幫助 ,希望繼續(xù)關(guān)注我的博客 --王 </pre> </body> </html>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)鼠標(biāo)跟隨運(yùn)動(dòng)效果
- 簡單實(shí)現(xiàn)js鼠標(biāo)跟隨效果
- js案例之鼠標(biāo)跟隨jquery版(實(shí)例講解)
- js鼠標(biāo)跟隨運(yùn)動(dòng)效果
- 原生js實(shí)現(xiàn)鼠標(biāo)跟隨效果
- javascript鼠標(biāo)跟隨運(yùn)動(dòng)3種效果(眼球效果,蘋果菜單,方向跟隨)
- JS實(shí)現(xiàn)的簡單鼠標(biāo)跟隨DiV層效果完整實(shí)例
- JS實(shí)現(xiàn)的鼠標(biāo)跟隨代碼(卡通手型點(diǎn)擊效果)
- js實(shí)現(xiàn)簡單鼠標(biāo)跟隨效果的方法
- Js鼠標(biāo)跟隨代碼小手點(diǎn)擊實(shí)例方法
相關(guān)文章
mapboxgl實(shí)現(xiàn)帶箭頭軌跡線的代碼
這篇文章主要介紹了mapboxgl實(shí)現(xiàn)帶箭頭軌跡線的代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01原生JS實(shí)現(xiàn)輪播效果+學(xué)前端的感受(防止走火入魔)
下面小編就為大家?guī)硪黄鶭S實(shí)現(xiàn)輪播效果+學(xué)前端的感受(防止走火入魔)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08event.keyCode鍵碼值表 附只能輸入特定的字符串代碼
非常不錯(cuò)的應(yīng)用,讓文本框里只能輸入money大家看下具體的實(shí)現(xiàn)代碼,真是只有想到,原理很簡單。2009-05-05javascript日期驗(yàn)證之輸入日期大于等于當(dāng)前日期
這篇文章主要介紹了javascript日期驗(yàn)證之輸入日期大于等于當(dāng)前日期,需要的朋友可以參考下2015-12-12用JavaScript實(shí)現(xiàn)讓瀏覽器停止載入頁面的方法
下面小編就為大家?guī)硪黄肑avaScript實(shí)現(xiàn)讓瀏覽器停止載入頁面的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01