怎樣用canvas繪製星空,月亮,大地,添加文字

這次帶給大家怎樣用canvas繪製星空,月亮,大地,添加文字，用canvas繪製星空,月亮,大地,添加文字注意事項有哪些，下面就是實戰案例，一起來看一下。

先上最終效果圖：

最終實現效果

#我們分成四個部分來畫這個效果。
1.一片星空
星空效果圖如下：

#我們分析這片星空，首先星星都分佈在頁三分之二及以上位置，星星大小不一，旋轉角度不一，在頁面中間，有散射的藍色天空效果。
好了，讓我們照分析的注意點來試著畫一片星空。
不過，這其中最重要的一點，就是學會畫一個五角星。
運用國中高中數學知識計算出五角星每一個折點的座標，具體函數如下，即畫出了一個正方方的五角星。
下面是一個簡易圖，有興趣的可以自己畫圖計算一下各個頂點數值。

根據計算，我們依序得到10個頂點值，並畫出一個正的五角星，程式碼如下所示：

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();
}

畫出了一個五角星後，我們應該思考一下這個五角星的旋轉及放大縮小變化，使用canvas的rotate方法進行旋轉變化，使用scale進行縮放變化，具體代碼如下所示：

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();
}

至此，我們就可以重複使用該方法，借用隨機值，畫出一片星空：

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);
    }

下來，讓我們為這片星空調以天空的顏色。

 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.一輪彎月
在上面一片星空的基礎上，我們增加一輪彎月，效果圖如下所示：

彎月，即為兩條圓弧，我們可以根據下圖所做輔助線中角的tan值相等來列方程式來計算。

最終程式碼如下所示，rot為旋轉角度，fillColor的填滿色。

function fillMoon(cxt,x1,y1,x2,y2,r,/*option*/rot,/*option*/fillColor){
cxt.save();
    cxt.beginPath();
    cxt.rotate(rot/180*Math.PI);    // 创建开始点
    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)); // 创建弧
    cxt.fillStyle=fillColor||"#fb3";
    cxt.fill();
cxt.restore();
}

3.大地

在上述基礎上，我們增加了一片大地，效果圖如下所示：

畫大地最主要的便是使用bezierCurveTo方法進行曲線的繪製，bezierCurveTo內的參數是經過計算得來的。 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.文字

到到了最後一步，也就是最簡單的一步了。
設定文字的大小，顏色，使用fillText進行文字繪製即可。

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

class="no-js"是什麼意思

Git的常用短語

nodejs的npm常用指令集合

怎麼用canvas來繪製彩色七巧板

以上是怎樣用canvas繪製星空,月亮,大地,添加文字的詳細內容。更多資訊請關注PHP中文網其他相關文章！