用 canvas 绘制星空、月亮、大地及添加文字的注意事项与实战案例

1.开始前的准备

在开始绘制梦幻星空之前，我们需要做一些准备工作。首先，确保你的电脑上安装了支持Canvas的浏览器，比如Chrome或者Firefox。然后，打开你的代码编辑器，新建一个HTML文件，并引入Canvas标签。这样，我们就可以在网页上绘制图形了。另外，如果你对Canvas不太熟悉，建议先看看一些基础教程，了解Canvas的基本用法和绘图API。这样，我们在实际操作时会更得心应手。

2.绘制星空的思路

绘制星空的第一步是确定星空的布局和风格。我们可以想象一下，星空应该是怎样的。星星应该分布在页面的上方，大小和旋转角度不一，给人一种自然的感觉。在页面的中间，我们还可以添加一些散射的蓝色效果，模拟天空的渐变。这样，星空看起来会更加真实和梦幻。接下来，我们需要考虑如何用代码实现这些效果。这包括星星的绘制、旋转和缩放，以及天空颜色的渲染。

3.绘制单个星星

绘制星星是整个星空绘制的关键。我们可以从绘制一个五角星开始。五角星的绘制需要用到一些初高中的数学知识，比如计算五角星的顶点坐标。我们可以通过一个函数来计算出五角星的10个顶点值，然后使用Canvas的绘图API来绘制这个五角星。绘制好一个五角星后，我们还可以通过Canvas的rotate方法来旋转星星，通过scale方法来缩放星星。这样，我们就可以用这个方法来绘制出各种各样的星星了。

4.绘制星空背景

在绘制好单个星星后，我们需要为整个星空设置一个背景。这个背景可以是渐变的蓝色，模拟夜空的效果。我们可以使用Canvas的渐变API来创建一个从深蓝到浅蓝的渐变效果，然后将其应用到整个画布上。这样，星空看起来会更加有层次感和立体感。同时，我们还可以在背景中添加一些散射的光点，模拟星光闪烁的效果。这样，星空看起来会更加生动和真实。

5.绘制弯月

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的绘图API来绘制这个弯月。绘制好弯月后，我们还可以通过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();
}

6.绘制大地

在星空和弯月的基础上，我们可以添加一片大地。大地的绘制需要用到一些曲线绘制的知识，比如使用bezierCurveTo方法来绘制曲线。我们可以通过一个函数来计算出大地的顶点坐标，然后使用Canvas的绘图API来绘制这个大地。绘制好大地后，我们还可以通过Canvas的fillStyle方法来为大地着色。这样，我们就可以用这个方法来绘制出各种各样的大地了。

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

7.添加文字

在星空、弯月和大地的基础上，我们可以添加一些文字。文字的添加需要用到一些文本绘制的知识，比如使用fillText方法来绘制文本。我们可以通过一个函数来设置文字的大小、颜色和位置，然后使用Canvas的绘图API来绘制这个文字。绘制好文字后，我们还可以通过Canvas的font方法来设置文字的字体。这样，我们就可以用这个方法来绘制出各种各样的文字了。

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

8.调试和优化

在完成整个绘制过程后，我们需要对代码进行调试和优化。这包括检查代码的逻辑是否正确，是否有潜在的bug，以及是否有可以优化的地方。我们可以通过一些调试工具来帮助我们找到代码中的问题，比如使用浏览器的开发者工具。同时，我们还可以通过一些优化技巧来提高代码的性能，比如减少不必要的绘制操作，合并相似的绘制操作等。

9.总结和回顾

在完成整个绘制过程后，我们需要对整个过程进行总结和回顾。这包括回顾我们在绘制过程中遇到的问题，以及我们是如何解决这些问题的。同时，我们还可以总结一些绘制星空的经验和技巧，比如如何选择合适的颜色，如何布局星星等。这样，我们就可以在以后的项目中更好地应用这些经验和技巧。

10.邀请读者互动

最后，我想邀请大家一起来聊聊，你们在绘制星空时遇到过哪些有趣的问题？或者有什么特别的小技巧想分享给大家？欢迎在评论区留言，也别忘了点赞和分享！让我们一起创造更多美丽的星空！

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