日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

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

一、前言

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

在瀏覽一些圖片網站的時候，經常會看到很多的漂亮的星空圖，比如，下面的圖片。其實這種星星圖片的效果，也可以通過html+css樣式和js的方式來實現(xiàn)。今天教大家如何實現(xiàn)星星圖的效果。

二、項目準備

軟件：Dreamweaver

三、實現(xiàn)的目標

每次刷新產生隨機的星星個數(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 設置canvas畫布大小 ，定義需要變量。

 
 
 
 
      
  
  
  
  1.  
    2.

3.2 產生隨機圓。

 
 
 
 
      
  
  
  
  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()方法，通過畫星星公式，將圓形轉換成星星狀 for 循環(huán)產生隨機位置星星。

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

星星有內切圓和外切圓，每兩個點之間的角度是固定的，因此可得到星星的每個點的坐標，畫出星星。

 
 
 
 
      
  
  
  
  1. /* 隨機產生星星*/ 
    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 隨機產生顏色。

Math函數(shù)隨機產生0-225的RGB值。

 
 
 
 
      
  
  
  
  1. /* 隨機顏色*/  
    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. 調用draw()方法實現(xiàn)功能。

 
 
 
 
      
  
  
  
  1. darw(); 
    2.

五、效果展示

1、點擊f12運行到瀏覽器

2、每次刷新網頁，隨機產生不一樣的星星和隨機顏色。

六、總結

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

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

代碼很簡單，希望對你有所啟發(fā)。

本文轉載自微信公眾號「 IT共享之家  」，可以通過以下二維碼關注。轉載本文請聯(lián)系 IT共享之家  公眾號。


新聞標題：手把手教你用Javascript制作隨機星星效果圖
網頁鏈接：http://www.5511xx.com/article/coopoog.html