快捷導(dǎo)航

JavaScript利用canvas實(shí)現(xiàn)星空效果

更新時(shí)間：2023年11月07日 11:49:45 作者：潘小七

Canvas對(duì)于我們前端來(lái)說(shuō)是一個(gè)非常強(qiáng)大的工具,它可以實(shí)現(xiàn)各種復(fù)雜的圖形和動(dòng)畫(huà)效果,我們?nèi)绻軌蚴炀氄莆账?我們就可以做很多炫酷的效果,本文就給大家介紹了用canvas畫(huà)出一片星空的方法,需要的朋友可以參考下

前言

由于最近用了挺多Echarts的，所以突然想學(xué)習(xí)學(xué)習(xí)它的底層原理Canvas。Canvas對(duì)于我們前端來(lái)說(shuō)是一個(gè)非常強(qiáng)大的工具，它可以實(shí)現(xiàn)各種復(fù)雜的圖形和動(dòng)畫(huà)效果，我們?nèi)绻軌蚴炀氄莆账?，我們就可以做很多炫酷的效果?/p>

Canvas 介紹

首先我們來(lái)介紹介紹Canvans，Canvas是 HTML5提供的一個(gè)繪圖API，它允許通過(guò)JavaScript和HTML元素創(chuàng)建和操作圖形。Canvas提供的是一個(gè)矩形畫(huà)布，我們可以在上面繪制各種圖形、動(dòng)畫(huà)與交互效果。

功能

上面了解了Canvas是什么之后, 我們?cè)賮?lái)和大家展開(kāi)說(shuō)說(shuō)Canvas 一些主要功能：

畫(huà)布：Canvas提供了一個(gè)矩形的畫(huà)布區(qū)域, 我們可以通過(guò)HTML中的<canvas>標(biāo)簽來(lái)創(chuàng)建并通過(guò)設(shè)置畫(huà)布的寬高來(lái)確定繪圖區(qū)域的大小。
繪畫(huà)API：Canvas提供了豐富的繪圖API，包括繪制路徑、直線、曲線、矩形、圓形、文本等。我們使用這些API來(lái)創(chuàng)建各種圖形，并自定義樣式、顏色、透明度等屬性。
動(dòng)畫(huà)：Canvas可以與JavaScript的動(dòng)畫(huà)函數(shù)結(jié)合使用，實(shí)現(xiàn)動(dòng)態(tài)的圖形效果。通過(guò)在每一幀中更新畫(huà)布上的內(nèi)容，能創(chuàng)建平滑的動(dòng)畫(huà)效果。
圖像處理：Canvas可以加載和繪制圖像。我們可以使用Canvas的API對(duì)圖像進(jìn)行裁剪、縮放、旋轉(zhuǎn)等操作，從而實(shí)現(xiàn)圖像處理的功能。
事件處理：Canvas支持鼠標(biāo)和觸摸事件的處理，我們可以通過(guò)監(jiān)聽(tīng)這些事件來(lái)實(shí)現(xiàn)交互效果，例如點(diǎn)擊、拖拽、縮放等等。

注意：Canvas 繪制的內(nèi)容是即時(shí)生成的，它不會(huì)被瀏覽器緩存，所以每次頁(yè)面加載Canvas都需要重新繪制，所以我們?cè)谑褂脮r(shí)需要考慮性能問(wèn)題。

星空

在介紹完Canvas之后，我們?cè)賮?lái)用Canvas和 JS結(jié)合，實(shí)現(xiàn)一片星空的效果。

第一步，我們先創(chuàng)建好html 結(jié)構(gòu)，代碼如下：

  <div class="landscape">
    </div>
    <canvas id="canvas"></canvas>
    <div class="filter"></div>
    <script src="./round_item.js"></script>

現(xiàn)在是沒(méi)有效果的，我們?cè)诮o它加上css代碼，將其美化，同時(shí)我們?cè)僭赾ss上加一些動(dòng)畫(huà)效果，完整代碼如下：

* {
    margin: 0;
    padding: 0;
}
html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: linear-gradient(to bottom, #000 0%, #5788fe 100%);

}

.landscape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./star/xkbg.png);
    background-repeat: repeat-x;
    background-size: 1000px 250px;
    background-position: center bottom;
}
.filter{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background: #fa7575;
    animation: colorChange 30s  ease-in infinite;
}
/* 漸變動(dòng)畫(huà)*/
@keyframes colorChange {
    0%,100%{
        opacity: 0;
    }
    50%{
        opacity: 0.7;
    }

}

這時(shí)候，我們看到的效果是這樣的：

這效果好像只有黃昏的顏色變化，少了星空。那這最后一步，就該我們Canvas上場(chǎng)了，我們要用Canvas畫(huà)出來(lái)一片星空，并配合css的顏色變化，實(shí)現(xiàn)一個(gè)夜晚到清晨的感覺(jué)。

我們 js 代碼這樣寫(xiě)：

//創(chuàng)建星星的函數(shù)
function RoundItem(index, x, y, ctx) {
    this.index = index
    this.x = x
    this.y = y
    this.ctx = ctx
    this.r = Math.random() * 2 + 1
    this.color = 'rgba(255,255,255,1)'
}
// 繪制
RoundItem.prototype.draw = function () { 
    this.ctx.fillStyle = this.color //指定顏色
    this.ctx.beginPath() // 開(kāi)始繪制
    this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false) // 繪制圓形
    this.ctx.closePath() // 結(jié)束繪制
    this.ctx.fill() //填充形狀
}
//移動(dòng)
RoundItem.prototype.move = function () {
    this.y -= 0.5
    this.draw()
}


let canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
round = [],
initRoundPopulation = 200; //星星的個(gè)數(shù)

const WIDTH = document.documentElement.clientWidth,
HEIGHT = document.documentElement.clientHeight;

canvas.width = WIDTH
canvas.height = HEIGHT

init()
// setInterval(animate, 1700)
animate()
function init() {
for (var i = 0; i < initRoundPopulation; i++) {
    round[i] = new RoundItem(i, Math.random() * WIDTH, Math.random() * HEIGHT, ctx)
    round[i].draw()
}
}
function animate() {
ctx.clearRect(0, 0, WIDTH, HEIGHT) //清除畫(huà)布
for (let star of round) {
    star.move()
}
requestAnimationFrame(animate) //通過(guò)刷新幀數(shù)來(lái)調(diào)用函數(shù)
}

將上述代碼添加上之后，我們也就完成星星的繪制并添加到了頁(yè)面上，最終的效果如下：