canvas绘制中国国旗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #canvas{  
            display: block;  
            margin: 50px auto;  
            box-shadow: 4px 4px 5px #8e8e8e;  
            -webkit-box-shadow: 8px 8px 5px #8e8e8e;  
        } 
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>
<script>
    window.onload = function()
    {
        var canvas = document.getElementById('canvas');

        canvas.width = 288;
        canvas.height = 192;

        var ctx = canvas.getContext('2d');

        ctx.beginPath();
        ctx.rect(0,0,288,192);
        ctx.closePath();

        ctx.fillStyle = "red";
        ctx.fill();  


        //大的星星
        drawStar(ctx,12,30,48,48,0);

        //四个小星星  
        drawStar(ctx, 4, 10, 96, 19, 18);

        drawStar(ctx, 4, 10, 115, 38, 126);

        drawStar(ctx, 4, 10, 115, 68, 72);

        drawStar(ctx, 4, 10, 96, 96, 180);  

    }

    //https://segmentfault.com/a/1190000005982536
    function drawStar(ctx,r,R,x,y,rote)
    {
         ctx.beginPath();//开始路径 
         
         for(var i =0;i<5;i++)
         {
             //顶点
             ctx.lineTo(Math.cos((18 + i * 72 - rote) / 180 * Math.PI) * R + x,
                 -Math.sin((18 + i * 72 - rote) / 180 * Math.PI) * R + y);
            
            //凹点
             ctx.lineTo(Math.cos((54 + i * 72 - rote) / 180 * Math.PI) * r + x,
                 -Math.sin((54 + i * 72 - rote) / 180 * Math.PI) * r + y);  

         }

         ctx.closePath();

         ctx.fillStyle = "yellow";
         ctx.fill();  

    }
</script>
当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »