溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

怎么用Javascript制作隨機(jī)星星效果圖

發(fā)布時(shí)間：2021-08-12 17:31:45 來(lái)源：億速云 閱讀：126 作者：chen 欄目：web開(kāi)發(fā)

這篇文章主要講解了“怎么用Javascript制作隨機(jī)星星效果圖”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么用Javascript制作隨機(jī)星星效果圖”吧！

 一、前言

在瀏覽一些圖片網(wǎng)站的時(shí)候，經(jīng)常會(huì)看到很多的漂亮的星空?qǐng)D，比如，下面的圖片。其實(shí)這種星星圖片的效果，也可以通過(guò)html+css樣式和js的方式來(lái)實(shí)現(xiàn)。今天教大家如何實(shí)現(xiàn)星星圖的效果。

怎么用Javascript制作隨機(jī)星星效果圖

二、項(xiàng)目準(zhǔn)備

軟件：Dreamweaver

三、實(shí)現(xiàn)的目標(biāo)

每次刷新產(chǎn)生隨機(jī)的星星個(gè)數(shù)。顯示畫(huà)布上。

四、項(xiàng)目實(shí)現(xiàn)

1. 創(chuàng)建canvas畫(huà)布

<body>     <canvas id='canvas'></canvas> </body>

2. 添加css樣式。

給canva 畫(huà)布加上邊框，方便觀察。

<style type="text/css">     canvas{         border:2px solid #f00; } </style>

3.添加js樣式

3.1 設(shè)置canvas畫(huà)布大小 ，定義需要變量。

<script type="text/javascript">      var _canvas=document.getElementById("canvas")     _canvas.width=500;     _canvas.height=500; var r,g ,b,a; </script>

3.2 產(chǎn)生隨機(jī)圓。

for (var j = 0; j < 150; j++) {         arc.x=Math.floor(Math.random()*_canvas.width);         arc.y=Math.floor(Math.random()*_canvas.height);         arc.r=Math.floor(Math.random()*31+10);         r=Math.ceil(Math.random()*256);         g=Math.ceil(Math.random()*256);         b=Math.ceil(Math.random()*256);         a=Math.random();          darw(); }

3.3 定義draw()方法，通過(guò)畫(huà)星星公式，將圓形轉(zhuǎn)換成星星狀 for 循環(huán)產(chǎn)生隨機(jī)位置星星。

如何畫(huà)星星?(公式解析)(圖片來(lái)源百度)

怎么用Javascript制作隨機(jī)星星效果圖

星星有內(nèi)切圓和外切圓，每?jī)蓚€(gè)點(diǎn)之間的角度是固定的，因此可得到星星的每個(gè)點(diǎn)的坐標(biāo)，畫(huà)出星星。

怎么用Javascript制作隨機(jī)星星效果圖

/* 隨機(jī)產(chǎn)生星星*/ for (var i = 0; i < 5; i++) {          _ctx.lineTo(Math.cos((18+72*i)/180*Math.PI)*arc.r+arc.x, -Math.sin((18+72*i)/180*Math.PI)*arc.r+arc.y);           _ctx.lineTo(Math.cos((54+72*i)/180*Math.PI)*arc.r/2+arc.x, -Math.sin((54+72*i)/180*Math.PI)*arc.r/2+arc.y);       }

3.4 隨機(jī)產(chǎn)生顏色。

Math函數(shù)隨機(jī)產(chǎn)生0-225的RGB值。

/* 隨機(jī)顏色*/      _ctx.fillStyle="rgba(" + r + "," + g + "," + b + "," + a + ")";      _ctx.fill();         _ctx.strokeStyle="rgba(" + r + "," + g + "," + b + "," + a + ")";       _ctx.stroke();       }

3.5. 調(diào)用draw()方法實(shí)現(xiàn)功能。

darw();

五、效果展示

1、點(diǎn)擊f12運(yùn)行到瀏覽器

怎么用Javascript制作隨機(jī)星星效果圖

2、每次刷新網(wǎng)頁(yè)，隨機(jī)產(chǎn)生不一樣的星星和隨機(jī)顏色。

怎么用Javascript制作隨機(jī)星星效果圖

感謝各位的閱讀，以上就是“怎么用Javascript制作隨機(jī)星星效果圖”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么用Javascript制作隨機(jī)星星效果圖這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手