代码如下:
<canvas class="mycanvas" width="500" height="500">
你的浏览器不支持canvas
</canvas>
<script type="text/javascript">
let mycanvas = document.querySelector('.mycanvas');
let c = mycanvas.getContext('2d');
//为了防止样式覆盖,从外往里画
//画一个大圆
c.beginPath();
c.arc(250, 250, 160, 0, Math.PI * 2);
c.fillStyle = "#e0dedf";
c.fill();
c.lineWidth = 30;
c.strokeStyle = 'rgb(196,30,58)';
c.stroke();
//画一个小圆
c.beginPath();
c.arc(250, 250, 100, 0, Math.PI * 2);
c.fillStyle = "rgb(0,43,127)";
c.fill();
c.lineWidth = 30;
c.strokeStyle = 'rgb(196,30,58)';
c.stroke();
//画五角星
c.beginPath();
for(let i = 0; i < 5; i++) {
c.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * 80 + 250, -Math.sin((18 + i * 72) / 180 * Math.PI) * 80 + 250);
c.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 32 + 250, -Math.sin((54 + i * 72) / 180 * Math.PI) * 32 + 250);
}
c.closePath();
c.fillStyle = "#e0dedf";
c.fill();
c.lineWidth = 1;
c.strokeStyle = 'rgb(0,43,127)';
c.stroke();
我这里只画了2个圆,只是把这两个圆的画笔宽度调大点,就形成了4个圆的效果