先上最終效果圖：
我們分為四部分來畫該效果营袜。
1.一片星空
星空效果圖如下：
我們分析一下這片星空荚板，首先星星都分布在頁面三分之二及以上位置，星星大小不一拧抖，旋轉(zhuǎn)角度不一唧席，在頁面中間嘲驾，有散射的藍色天空效果。
好了徒仓，讓我們按所分析的注意點來試著畫一片星空誊垢。
不過症见，這其中最最重要的一點谋作，就是學(xué)會畫一個五角星壁晒。
運用初高中數(shù)學(xué)知識計算出五角星每一個折點的坐標秒咐，具體函數(shù)如下携取，即畫出了一個正正方方的五角星帮孔。
下面是一個簡易圖，有興趣的可以自己畫圖計算一下各個頂點值晤斩。
根據(jù)計算澳泵，我們依次得出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();
}
畫出了一個五角星后维苔，我們應(yīng)該思考一下這個五角星的旋轉(zhuǎn)及放大縮小變化介时，使用canvas的rotate方法進行旋轉(zhuǎn)變化凌彬，使用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();
}
至此勉失，我們就可以重復(fù)使用該方法原探，借用隨機值，畫出一片星空：
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);
}
下來徒蟆，讓我們?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ǔ)上，我們增加一輪彎月催式，效果圖如下所示：
彎月荣月，即為兩條圓弧梳毙，我們可以根據(jù)下圖所做輔助線中角的tan值相等來列方程式進行計算。
最終代碼如下所示堂氯，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)建開始點
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ǔ)上，我們增加了一片大地授段，效果圖如下所示：
畫大地最主要的便是使用bezierCurveTo方法進行曲線的繪制侵贵，bezierCurveTo內(nèi)的參數(shù)是經(jīng)過計算得來的缘薛。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.文字
到了最后一步表锻，也就是最簡單的一步了瞬逊。
設(shè)置文字的大小仪或，顏色，使用fillText進行文字繪制即可骚腥。
CXT.save();
CXT.font="bold 20px Georgia";
CXT.fillStyle="#fff";
CXT.fillText("Canvas文字繪制",200,650);
CXT.fillText("——海上月_天上月",500,700);
CXT.restore();
}```