canvas绘制中国国旗

本文阅读 1 分钟
首页 前端笔记 正文
<!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>

图片描述

解压密码: detechn或detechn.com

免责声明

本站所有资源出自互联网收集整理,本站不参与制作,如果侵犯了您的合法权益,请联系本站我们会及时删除。

本站发布资源来源于互联网,可能存在水印或者引流等信息,请用户自行鉴别,做一个有主见和判断力的用户。

本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。

jsonp原生跨域
« 上一篇 10-17
程序猿个性404界面
下一篇 » 10-19

发表评论