如何用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>
