如何用Canvas画一个美国队长的盾牌？

如何用Canvas画一个最简单的美队盾牌呢？
做起来非常简单，找到五角星五个点相对于圆心的位置就可以啦！
效果图和完整代码如下：

效果图：

下载.png

my code：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>曾小小晨的页面</title>
    <style>
        canvas {
            background-color: #CACACA;
        }
    </style>
</head>
<body>
<canvas id="cvs" width="600" height="600"></canvas>

<script>
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');
    var w = cvs.width,
        h = cvs.height;

    var x = w / 2,
        y = h / 2,
        start = -Math.PI / 2,
        end = Math.PI * 3 / 2;

    ctx.beginPath();
    ctx.arc(x, y, 250, start, end);
    ctx.fillStyle = '#882446';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(x, y, 210, start, end);
    ctx.fillStyle = '#989CA0';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(x, y, 170, start, end);
    ctx.fillStyle = '#882446';
    ctx.fill();

    ctx.beginPath();
    ctx.arc(x, y, 130, start, end);
    ctx.fillStyle = '#1A306D';
    ctx.fill();

    r = 128;

    ctx.beginPath();
    ctx.moveTo(x, y - r);
    // 顶点连下左
    ctx.lineTo(x - r * Math.sin(Math.PI / 5), y + r * Math.cos(Math.PI / 5));
    // 下左连上右
    ctx.lineTo(x + r * Math.cos(Math.PI / 10), y - r * Math.sin(Math.PI / 10));
    // 上右连上左
    ctx.lineTo(x - r * Math.cos(Math.PI / 10), y - r * Math.sin(Math.PI / 10));
    // 上左连下右
    ctx.lineTo(x + r * Math.sin(Math.PI / 5), y + r * Math.cos(Math.PI / 5));
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.fillStyle = '#989CA0';
    ctx.fill();


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

如何用Canvas画一个美国队长的盾牌？

推荐阅读更多精彩内容