JavaScript canvas實(shí)現(xiàn)雪花隨機(jī)動(dòng)態(tài)飄落
更新時(shí)間:2020年02月08日 09:34:34 作者:哪天才能學(xué)到vue
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)雪花隨機(jī)動(dòng)態(tài)飄落,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
用canvas實(shí)現(xiàn)雪花隨機(jī)動(dòng)態(tài)飄落,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> body{ margin: 0; padding: 0; } canvas{ background: #000; } </style> <body> <canvas id = "snow"> </canvas> <script> var canvas = document.getElementById('snow'); var context = canvas.getContext('2d'); // 獲得可視區(qū)的寬高 canvas.width = window.innerWidth; canvas.height = window.innerHeight; function snow(){ context.save(); // 開(kāi)啟路徑 context.beginPath(); // 移動(dòng)畫(huà)布,確定雪花終點(diǎn)為中心點(diǎn) context.translate(100,100); //起點(diǎn) context.moveTo(-20,0); // 終點(diǎn) context.lineTo(20,0); // 線變成白色 context.strokeStyle = '#fff'; // 線變粗 context.lineWidth = 10; // 線變圓頭 context.lineCap = 'round'; context.stroke(); // 角度轉(zhuǎn)弧度 var disX = Math.sin(30*Math.PI/180)*20; var disY = Math.sin(60*Math.PI/180)*20; // 畫(huà)第二條線,左下到右上的線 context.moveTo(-disX,disY); context.lineTo(disX,-disY); // 畫(huà)第三條線 context.moveTo(-disX,-disY); context.lineTo(disX,disY); context.stroke(); context.restore(); } // snow(); //生成雪花的構(gòu)造函數(shù) function Snow(x,y,scale,rotate,speedX,speedY,speedR){ this.x = x; this.y = y; this.scale = scale; this.rotate = rotate; this.speedX = speedX; this.speedY = speedY; this.speedR = speedR; // 渲染雪花 this.render = function(){ context.save(); context.beginPath(); context.translate(this.x,this.y); context.scale(this.scale,this.scale); context.rotate(this.rotate*Math.PI/180); context.moveTo(-20,0); context.lineTo(20,0); context.strokeStyle = '#fff'; context.lineWidth = 10; context.lineCap = 'round'; context.stroke(); var disX = Math.sin(30*Math.PI/180)*20; var disY = Math.sin(60*Math.PI/180)*20; context.moveTo(-disX,disY); context.lineTo(disX,-disY); context.moveTo(-disX,-disY); context.lineTo(disX,disY); context.stroke(); context.restore(); } } // var snow = new Snow(50,50,1,10,10,10,10); // snow.render(); // 存儲(chǔ)所有生成的雪花 var snowArray = []; // 生成雪花 function init(){ var len = 100; for(var i = 0;i<len;i++){ var x = Math.random()*canvas.width; var scale = Math.random()+0.5; var rotate = Math.random()*60; var speedX = Math.random()+1 var speedY = Math.random()+5; var speedR = Math.random()*4+2; // var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR); // snow.render(); (function(x,y,scale,rotate,speedX,speedY,speedR){ setTimeout(function(){ var snow = new Snow(x,0,scale,rotate,speedX,speedY,speedR); snow.render(); snowArray.push(snow); },Math.random()*8000); })(x,0,scale,rotate,speedX,speedY,speedR); }snowing(); }init(); // 動(dòng)起來(lái) function snowing(){ setInterval(function(){ //先清除 context.clearRect(0,0,canvas.width,canvas.height); for(var i = 0;i < snowArray.length;i++){ snowArray[i].x = (snowArray[i].x+snowArray[i].speedX)%canvas.width; snowArray[i].y = (snowArray[i].y+snowArray[i].speedY)%canvas.height; snowArray[i].rotate = (snowArray[i].rotate+snowArray[i].speedR)%60; snowArray[i].render(); } },30); } /** * sin60 = 對(duì)邊/斜邊 => 對(duì)邊 = sin60*斜邊 => y=sin60*半徑(r); */ </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS封裝cookie操作函數(shù)實(shí)例(設(shè)置、讀取、刪除)
這篇文章主要介紹了JS封裝cookie操作函數(shù),以實(shí)例形式分析了JavaScript實(shí)現(xiàn)針對(duì)cookie的設(shè)置、獲取及刪除相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11Array棧方法和隊(duì)列方法的特點(diǎn)說(shuō)明
本篇文章主要是對(duì)Array棧方法與隊(duì)列方法的特點(diǎn)進(jìn)行了詳細(xì)的說(shuō)明介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01微信小程序一周時(shí)間表功能實(shí)現(xiàn)
這篇文章主要介紹了微信小程序一周時(shí)間表功能實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10Javascript新手入門之字符串拼接與變量的應(yīng)用
這篇文章主要給大家介紹了關(guān)于Javascript新手入門之字符串拼接與變量應(yīng)用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12