如何用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>
网友评论