canvas星空的2d绘制示例

一切尽在注释里:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>star rotate</title>
</head>
<body>
    <canvas id="canvas">
        当前浏览器不支持canvas，请更换浏览器使用
    </canvas>

    <script type="text/javascript">
    window.onload=function(){
        //获取canvas节点
        var canvas=document.getElementById("canvas");

        //设置节点的属性：宽度，高度
        canvas.width=800;
        canvas.height=600;

        //设置绘制模式
        var context=canvas.getContext("2d");
        // context.moveTo(100,100);
        // context.lineTo(400,400);

        //绘制渐变背景的矩形
        var grd=context.createLinearGradient(0,0,0,600);
        //设置渐变点（范围0-1，添加渐变色），在这里我们起始设置为黑色，渐变到墨蓝色
        grd.addColorStop(0,"black");
        grd.addColorStop(1,"#054696");
        //设置填充样式为设置好的渐变模式
        context.fillStyle=grd;
        //使用设置好的模式绘制矩形，在这里的矩形作为背景层
        context.fillRect(0,0,800,600);


        // 在背景层上面绘制200个五角星
        context.fillStyle="yellow";
        for(var i=0;i<200;i++){
            //设置随机半径为3-8
            var R=Math.random()*5+3;
            //设置随机x坐标为10-790
            var x=Math.random()*780+10;
            //设置随机y坐标为6-354
            var y=(Math.random()*580+10)*3/5;
            // 设置随机旋转角度为0-72
            var angle=Math.random()*72;
            //设置五角星路径
            starPath(context,R,x,y,angle);
            //填充五角星路径
            context.fill();
        }
    }

    //建立五角星路径，下面有图示
    function starPath(cxt,R,x,y,angle){
        //beginPath()新建路径
        cxt.beginPath();
        //五角星有10个顶点，循环设置顶点，顶点见图示
        for(var i=0;i<5;i++){

            cxt.lineTo(Math.cos((72*i+angle)*Math.PI/180)*R+x,Math.sin((72*i+angle)*Math.PI/180)*R+y);
            // 在这里使用小圆半径为大圆的一半，两个圆见图示
            cxt.lineTo(Math.cos((72*i+36+angle)*Math.PI/180)*R/2+x,Math.sin((72*i+36+angle)*Math.PI/180)*R/2+y);
        }
        //closePath()闭合路径
        cxt.closePath();
    }

    </script>
</body>
</html>

下面贴出五角星路径的构造图:

五角星每两个个外顶点和内顶点与中心连线的夹角都为72°，我们引入坐标轴和三角函数进行计算。

每个外顶点坐标为(cos(72*i)*R,sin(72*i)*R)(i=1,2,3,4,5)

每个内顶点在相邻外顶点的基础上偏移36°，

坐标可以这么写(cos(72*i+36)*R,sin(72*i+36)*R)(i=1,2,3,4,5)，

也可以这么写(cos(72*i-36)*R,sin(72*i-36)*R)(i=1,2,3,4,5)

因为js中的三角函数是弧度制，角度转弧度的公式为：arc=angle/180*Math.PI

上述即是星空的完整绘制过程。