html5 canvas画五角星，美国队长

2024-03-04 21:45•html•阅读 2576

画一波五角星：美国队长图标

原理：（1）根据五角星的顶点，外顶点5个，内顶点5个，分成内外圆

（2）由三角函数可表示出每个顶点的位置

（3）利用canvas的lineTo()接口画图

上代码：

 1 <!DOCTYPE html>
 2 <html >
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Captain America</title>
 7     <style type="text/css">
 8     #canvas {
 9         display: block;
10         margin: 50px auto;
11     }
12     </style>
13 </head>
14 
15 <body>
16     <canvas ></canvas>
17     <script>
18     window.onload = function() {
19         var canvas = document.getElementById("canvas");
20         canvas.width = 800;
21         canvas.height = 600;
22 
23         var context = canvas.getContext("2d");
24         // 四个圆
25         drawArc(context, 300, 300, 120, 0, Math.PI * 2, false, "#dd5870");
26         drawArc(context, 300, 300, 100, 0, Math.PI * 2, false, "#e0dedf");
27         drawArc(context, 300, 300, 80, 0, Math.PI * 2, false, "#dd5870");
28         drawArc(context, 300, 300, 60, 0, Math.PI * 2, false, "#2773d3");
29         drawStar(context, 20, 60, 300, 300, 0, "#dedce1"); // 五角星  
30     }
31 
32     function drawStar(ctx, r, R, x, y, changeDeg, fillColor) {
33         //绘制星星的路径,changeDeg：表示五角星旋转的角度
34         ctx.beginPath(); //开始路径  
35         for (var i = 0; i < 5; i++) {
36             ctx.lineTo(Math.cos((18 + i * 72 - changeDeg) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 - changeDeg) / 180 * Math.PI) * R + y);
37             ctx.lineTo(Math.cos((54 + i * 72 - changeDeg) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72 - changeDeg) / 180 * Math.PI) * r + y);
38         }
39         ctx.closePath() //结束路径  
40         ctx.fillStyle = fillColor;
41         ctx.fill();
42     }
43 
44     function drawArc(ctx, x, y, r, stratAngel, endAngel, flag, fillColor) {
45         ctx.beginPath();
46         ctx.arc(x, y, r, stratAngel, endAngel, flag);
47         ctx.fillStyle = fillColor;
48         ctx.fill();
49         ctx.closePath();
50     }
51     </script>
52 </body>
53 </html>

结果：

html5 canvas画五角星，美国队长