日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
手把手教你用Javascript制作隨機(jī)星星效果圖

一、前言

公司主營(yíng)業(yè)務(wù)：網(wǎng)站建設(shè)、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)推出小店免費(fèi)做網(wǎng)站回饋大家。

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

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

軟件：Dreamweaver

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

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

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

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

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.  
    4.

2. 添加css樣式。

給canva 畫布加上邊框，方便觀察。

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.     canvas{ 
    3.   
  
  
  
  3.         border:2px solid #f00; 
    4.   
  
  
  
  4. } 
    5.   
  
  
  
  5.  
    6.

3.添加js樣式

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

 
 
 
 
      
  
  
  
  1.  
    2.

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

 
 
 
 
      
  
  
  
  1. for (var j = 0; j < 150; j++) { 
    2.   
  
  
  
  2.         arc.x=Math.floor(Math.random()*_canvas.width); 
    3.   
  
  
  
  3.         arc.y=Math.floor(Math.random()*_canvas.height); 
    4.   
  
  
  
  4.         arc.r=Math.floor(Math.random()*31+10); 
    5.   
  
  
  
  5.         r=Math.ceil(Math.random()*256); 
    6.   
  
  
  
  6.         g=Math.ceil(Math.random()*256); 
    7.   
  
  
  
  7.         b=Math.ceil(Math.random()*256); 
    8.   
  
  
  
  8.         a=Math.random(); 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.         darw(); 
    11.   
  
  
  
  11. } 
    12.

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

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

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

 
 
 
 
      
  
  
  
  1. /* 隨機(jī)產(chǎn)生星星*/ 
    2.   
  
  
  
  2. for (var i = 0; i < 5; i++) { 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.         _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); 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.          _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); 
    7.   
  
  
  
  7.       
    8.   
  
  
  
  8. } 
    9.

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

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

 
 
 
 
      
  
  
  
  1. /* 隨機(jī)顏色*/  
    2.   
  
  
  
  2.     _ctx.fillStyle="rgba(" + r + "," + g + "," + b + "," + a + ")";  
    3.   
  
  
  
  3.     _ctx.fill(); 
    4.   
  
  
  
  4.         _ctx.strokeStyle="rgba(" + r + "," + g + "," + b + "," + a + ")"; 
    5.   
  
  
  
  5.       _ctx.stroke(); 
    6.   
  
  
  
  6.       } 
    7.

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

 
 
 
 
      
  
  
  
  1. darw(); 
    2.

五、效果展示

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

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

六、總結(jié)

本項(xiàng)目利用canvas畫布，實(shí)現(xiàn)星星圖的效果，以及在運(yùn)用javascript產(chǎn)生星星效果時(shí)，遇到的一些難點(diǎn)進(jìn)行了分析及提供解決方案。

歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。

代碼很簡(jiǎn)單，希望對(duì)你有所啟發(fā)。

本文轉(zhuǎn)載自微信公眾號(hào)「 IT共享之家  」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系 IT共享之家  公眾號(hào)。


分享題目：手把手教你用Javascript制作隨機(jī)星星效果圖
網(wǎng)頁(yè)路徑：http://www.dlmjj.cn/article/coopoog.html