怎样用canvas绘制星空,月亮,大地,添加文字-木庄网络博客

本文摘自PHP中文网，作者php中世界最好的语言，侵删。

这次给大家带来怎样用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.一轮弯月
在上面一片星空的基础上，我们增加一轮弯月，效果图如下所示：

阅读剩余部分