canvas星空的2d绘制示例

最新推荐文章于 2023-07-15 00:00:23 发布

weixin_34356555

最新推荐文章于 2023-07-15 00:00:23 发布

阅读量104

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/lonelydawn/blog/672536

版权

2019独角兽企业重金招聘Python工程师标准>>>

一切尽在注释里:

<!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>

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