<!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>
</head>
<body>
<canvas width="600px" height="600px" id="mycanvas" style="background-color: #e6e8f0;"></canvas>
<script>
var canvas=document.getElementById('mycanvas');
var cxt=canvas.getContext('2d');
cxt.beginPath();
cxt.lineWidth='40';
cxt.strokeStyle='#f13c3c';//红
cxt.arc(300,300,200,0,Math.PI*2,false);
cxt.stroke();
cxt.beginPath();
cxt.lineWidth='30';
cxt.strokeStyle='#e6e8f0';//白
cxt.arc(300,300,160,0,Math.PI*2,false);
cxt.stroke();
cxt.beginPath();
cxt.lineWidth='25';
cxt.strokeStyle='#f13c3c';//红
cxt.arc(300,300,130,0,Math.PI*2,false);
cxt.stroke();
cxt.beginPath();
cxt.fillStyle='#4465d3';//蓝
cxt.arc(300,300,130,0,Math.PI*2,false);
cxt.fill();
cxt.stroke();
cxt.beginPath();
cxt.lineWidth='1';
cxt.shadowBlur='20';
cxt.shadowColor='#f13c3c';
var x=300,y=300,r=130;//acebda
cxt.moveTo(x,y-r);//A
cxt.lineTo(r*(Math.sin(Math.PI*36/180))+x,r*(Math.cos(Math.PI*36/180))+y);//c
cxt.lineTo(x-r*(Math.cos(Math.PI*18/180)),y-r*(Math.sin(Math.PI*18/180)));//e
cxt.lineTo(r*(Math.cos(Math.PI*18/180))+x,y-r*(Math.sin(Math.PI*18/180)));//B
cxt.lineTo(x-r*(Math.sin(Math.PI*36/180)),r*(Math.cos(Math.PI*36/180))+y);//d
cxt.lineTo(x,y-r);
cxt.stroke();
// cxt.closePath();
cxt.fillStyle='#e6e8f0';
cxt.fill();
</script>
</body>
</html>
难点主要在于五角星的5个顶点坐标的获取,我也是网上搜索了一些关于正五角星的角度,从而运用数学里的正弦余弦取得了相应的坐标值,顶点是A,顺时针方向依次是A,B,C,D,E,其中五角星的连接按照普通的画法即ACEDBA,然后勾勒,再填充就会得到想要的效果。效果如图,如有未完善之处,欢迎各位大佬指教一二。