小編給大家分享一下如何用canvas繪制星空,月亮,大地,添加文字，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站一直通過(guò)網(wǎng)站建設(shè)和網(wǎng)站營(yíng)銷幫助企業(yè)獲得更多客戶資源。 以"深度挖掘，量身打造，注重實(shí)效"的一站式服務(wù)，以成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、移動(dòng)互聯(lián)產(chǎn)品、成都全網(wǎng)營(yíng)銷服務(wù)為核心業(yè)務(wù)。十年網(wǎng)站制作的經(jīng)驗(yàn)，使用新網(wǎng)站建設(shè)技術(shù)，全新開發(fā)出的標(biāo)準(zhǔn)網(wǎng)站，不但價(jià)格便宜而且實(shí)用、靈活，特別適合中小公司網(wǎng)站制作。網(wǎng)站管理系統(tǒng)簡(jiǎn)單易用，維護(hù)方便，您可以完全操作網(wǎng)站資料，是中小公司快速網(wǎng)站建設(shè)的選擇。

先上最終效果圖：

最終實(shí)現(xiàn)效果

我們分為四部分來(lái)畫該效果。
1.一片星空
星空效果圖如下：

我們分析一下這片星空，首先星星都分布在頁(yè)面三分之二及以上位置，星星大小不一，旋轉(zhuǎn)角度不一，在頁(yè)面中間，有散射的藍(lán)色天空效果。
好了，讓我們按所分析的注意點(diǎn)來(lái)試著畫一片星空。
不過(guò)，這其中最最重要的一點(diǎn)，就是學(xué)會(huì)畫一個(gè)五角星。
運(yùn)用初高中數(shù)學(xué)知識(shí)計(jì)算出五角星每一個(gè)折點(diǎn)的坐標(biāo)，具體函數(shù)如下，即畫出了一個(gè)正正方方的五角星。
下面是一個(gè)簡(jiǎn)易圖，有興趣的可以自己畫圖計(jì)算一下各個(gè)頂點(diǎn)值。

根據(jù)計(jì)算，我們依次得出10個(gè)頂點(diǎn)值，并畫出一個(gè)正的五角星，代碼如下所示：

function setPath(cxt){
    cxt.beginPath();    for (var i = 0; i < 5; i++) {
        cxt.lineTo(            Math.cos((18 + i * 72 ) / 180 * Math.PI) * 10 ,
            -Math.sin((18 + i * 72 ) / 180 * Math.PI) * 10
        );
        cxt.lineTo(            Math.cos((54 + i * 72) / 180 * Math.PI) * 5 ,
            -Math.sin((54 + i * 72 ) / 180 * Math.PI) * 5
        );
    }
    cxt.closePath();
}

畫出了一個(gè)五角星后，我們應(yīng)該思考一下這個(gè)五角星的旋轉(zhuǎn)及放大縮小變化，使用canvas的rotate方法進(jìn)行旋轉(zhuǎn)變化，使用scale進(jìn)行縮放變化，具體代碼如下所示：

function drawStar(cxt, R, x, y, rot) {
    cxt.save();
    cxt.translate(x,y);
    cxt.rotate(rot/180*Math.PI);
    cxt.scale(R,R);
    setPath(cxt)
    cxt.fillStyle = "#fb3";
    cxt.fill();
    cxt.restore();
}

至此，我們就可以重復(fù)使用該方法，借用隨機(jī)值，畫出一片星空：

for (var i = 0; i < 400; i++) {        
            var r = Math.random();
            var x = Math.random() * canvas.width;           
            var y = Math.random() * canvas.height*0.6;        
            var rot = Math.random() * 360;
        drawStar(context, r, x, y, rot);
    }

下來(lái)，讓我們?yōu)檫@片星空調(diào)以天空的顏色。

 var linearGard=context.createRadialGradient(canvas.width/2,canvas.height,0,canvas.width/2,canvas.height,canvas.height);
    linearGard.addColorStop(1.0,"black");
    linearGard.addColorStop(0.0,"#148EFB");
    context.fillStyle = linearGard;
    context.fillRect(0, 0, canvas.width, canvas.height);

至此，我們的一片星空，就畫完了。
2.一輪彎月
在上面一片星空的基礎(chǔ)上，我們?cè)黾右惠啅澰?，效果圖如下所示：

彎月，即為兩條圓弧，我們可以根據(jù)下圖所做輔助線中角的tan值相等來(lái)列方程式進(jìn)行計(jì)算。

最終代碼如下所示，rot為旋轉(zhuǎn)角度，fillColor的填充色。

function fillMoon(cxt,x1,y1,x2,y2,r,/*option*/rot,/*option*/fillColor){
cxt.save();
    cxt.beginPath();
    cxt.rotate(rot/180*Math.PI);    // 創(chuàng)建開始點(diǎn)
    cxt.arc(x1,y1,r,0.5*Math.PI,1.5*Math.PI,true);
    cxt.moveTo(x1,y1-r);
    cxt.arcTo(x2,y2,x1,y1+r,dis(r,x2-x1)); // 創(chuàng)建弧
    cxt.fillStyle=fillColor||"#fb3";
    cxt.fill();
cxt.restore();
}

3.大地

在以上基礎(chǔ)上，我們?cè)黾恿艘黄蟮?，效果圖如下所示：

畫大地最主要的便是使用bezierCurveTo方法進(jìn)行曲線的繪制，bezierCurveTo內(nèi)的參數(shù)是經(jīng)過(guò)計(jì)算得來(lái)的。landStyle為該圖形著色。
代碼如下：

function drawLand(cxt){
    cxt.save();
    cxt.beginPath();
    cxt.moveTo(0,600);
    cxt.bezierCurveTo(540,400,660,800,1430,600);
    cxt.lineTo(1430,800);
    cxt.lineTo(0,800);
    cxt.closePath();    var landStyle=cxt.createLinearGradient(0,800,0,0);
    landStyle.addColorStop(0,"#030");
    landStyle.addColorStop(1,"#580");
    cxt.fillStyle=landStyle;
    cxt.fill();
    cxt.restore();
}

4.文字

到了最后一步，也就是最簡(jiǎn)單的一步了。
設(shè)置文字的大小，顏色，使用fillText進(jìn)行文字繪制即可。

   CXT.save();
    CXT.font="bold 20px Georgia";
    CXT.fillStyle="#fff";
    CXT.fillText("Canvas文字繪制",200,650);
    CXT.fillText("——海上月_天上月",500,700);
    CXT.restore();
}```

看完了這篇文章，相信你對(duì)如何用canvas繪制星空,月亮,大地,添加文字有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！