整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
、前言
在瀏覽一些圖片網(wǎng)站的時候，經(jīng)常會看到很多的漂亮的星空圖，比如，下面的圖片。其實這種星星圖片的效果，也可以通過html+css樣式和js的方式來實現(xiàn)。今天教大家如何實現(xiàn)星星圖的效果。
軟件：Dreamweaver
每次刷新產(chǎn)生隨機的星星個數(shù)。顯示畫布上。
<body>
<canvas id='canvas'></canvas>
</body>給canva 畫布加上邊框，方便觀察。
<style type="text/css">
canvas{
border:2px solid #f00;
}
</style><script type="text/javascript">
var _canvas=document.getElementById("canvas")
_canvas.width=500;
_canvas.height=500;
var r,g ,b,a;
</script>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();
}如何畫星星？（公式解析）（圖片來源百度）
星星有內(nèi)切圓和外切圓，每兩個點之間的角度是固定的，因此可得到星星的每個點的坐標，畫出星星。
/* 隨機產(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);
}Math函數(shù)隨機產(chǎn)生0-225的RGB值。
/* 隨機顏色*/
_ctx.fillStyle="rgba(" + r + "," + g + "," + b + "," + a + ")";
_ctx.fill();
_ctx.strokeStyle="rgba(" + r + "," + g + "," + b + "," + a + ")";
_ctx.stroke();
}darw();1、點擊f12運行到瀏覽器
2、每次刷新網(wǎng)頁，隨機產(chǎn)生不一樣的星星和隨機顏色。
想學(xué)習(xí)更多前端、Python爬蟲、大數(shù)據(jù)等計算機知識，請前往：http://pdcfighting.com/
們可以運用canvas在瀏覽器中繪制出各種漂亮的圖形，僅需要確定圖形的各個坐標點即可完成我們所需要的任務(wù)。如果我們要想畫出精確的圖案，就需要精確的計算出每個坐標點。下面給出了畫五角星的基本方法（僅供參考），只要掌握了步驟，準確計算出坐標點，就可以繪制出比下面的這個圖好看，那就先看看步驟和代碼是怎樣實現(xiàn)的吧。
<!--<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>繪制五角星</title>
</head>
<body>
<canvas id="demo">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>
<script>
var canvas = document.getElementById("demo");
canvas.width = 500;
canvas.height = 500;
canvas.style.border = "1px solid pink";
var ctx = canvas.getContext("2d");
// 找到起始點
ctx.moveTo(0, 150);
// 到達結(jié)束點
ctx.lineTo(500, 150);
ctx.lineTo(0,500);
ctx.lineTo(250,0);
ctx.lineTo(500,500);
// ctx.lineTo(0, 100);
// 閉合線段
ctx.closePath();
// 設(shè)置線段描邊的顏色
ctx.strokeStyle = "red";
// 設(shè)置描邊的寬度
ctx.lineWidth = 2;
// 將線段描邊
ctx.stroke();
// 設(shè)置填充的屬性值
ctx.fillStyle = "yellow";
// 設(shè)置填充的顏色
ctx.fill();
</script>
</body>
</html>-->隨著HTML5的火熱，越來越多的人投入到HTML5開發(fā)中了，canvas作為HTML5中比較重要的一個元素，在很多官網(wǎng)的主頁面中被使用到。今天我們一起來看看如何使用canvas畫出一個夢幻的星空背景，還會有流星運動。
本文的代碼已經(jīng)放到Github上了，感興趣的可以自取，Github地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/starry/starry.html
HTML5
首先我們來看看通過canvas實現(xiàn)的星空效果圖，如下所示。
效果圖
接下來我們看看這個效果是如何通過代碼一步步實現(xiàn)的。
首先來看看頁面上的HTML代碼，只有一個Div元素。
HTML代碼
首先我們需要定義一些常量，比如畫布的寬和高，星星數(shù)量，流星個數(shù)。在這個星空中流星其實是星星的一個，只是添加了動態(tài)效果。
頁面初始化
然后是設(shè)定一個定時器，通過一段隨機時間生成一個流星的索引號。
流星索引號
緊接著來看看生成一個星星的方法，該方法返回一個星星的各項參數(shù)，包括x,y軸坐標，透明度，x,y軸偏移量。
生成星星的參數(shù)
然后是最重要的render方法，通過該方法可以將星星渲染至畫布上，我們將這個方法拆開看，首先是對流星的繪制，流星索引號通過上面metor方法獲得。
畫流星
然后是對于星星各項參數(shù)的處理，比如有的星星生成的點坐標超出了屏幕寬高，有的透明度是負數(shù)，都要將其處理成正常參數(shù)。
各項參數(shù)判斷
最后是在畫布中進行繪制。
畫布繪制
至此，這個畫面效果的講解完畢，如果代碼正確的話，就可以看到文中出現(xiàn)的效果圖。
今天這篇文章主要是借助HTML5中的canvas畫出了一個夢幻星空的效果，你學(xué)會了嗎？
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
