怎样用canvas绘制星空,月亮,大地,添加文字(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();
}```