The picture

 

Key points:

// change the circle graph to ctx.beginPath(); ctx.arc(100, 100, 30, 0,Math.PI * 2, false); ctx.closePath(); ctx.fillStyle = “#000”; ctx.fill();

Add something in the middle for effect

Code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>test1</title> </head> body { background: #000; margin: 0px; padding: 0px; } #main { position: absolute; width: 200px; height: 200px; } </style> <body> <div id="main"></div> </body> <script> var por = { init: function () { var main = document.getElementById("main"); InnerHTML = '<canvas ID =" canvasMain "width="' + main.offsetwidth + '" height="' + main.offsetHeight + '"></canvas>'; var vmain = document.getElementById("canvasmain"); var c = document.getElementById("canvasmain"); var ctx = c.getContext("2d"); Ctx.beginpath (); ctx.moveTo(100, 100); Ctx. arc(100, 100, 30, 0, math.pi * 1.5, false); ctx.closePath(); ctx.fillStyle = "#fff"; ctx.fill(); // ctx.beginPath(); // ctx.moveTo(100, 100); // ctx.arc(100, 100, 30, math. PI * 1.5, math. PI * 1.5 - math. PI * 2 * 60/100, true); // ctx.closePath(); // ctx.fillStyle = "#bbb"; // ctx.fill(); // clockwise first content ctx.beginPath(); ctx.moveTo(100, 100); Ctx. arc(100, 100, 50, math. PI * 1.5, math. PI * 1.5 - math. PI * 2 * 60/100, true); ctx.closePath(); ctx.fillStyle = "#ddd"; ctx.fill(); // clockwise 2 ctx.beginPath(); ctx.moveTo(100, 100); Ctx. arc(100, 100, 50, math. PI * 1.5 - math. PI * 2 * 60/100, math. PI * 1.5 - math. PI * 2 * 70/100, true); ctx.closePath(); ctx.fillStyle = "#090765"; ctx.fill(); // clockwise 3 ctx.beginPath(); ctx.moveTo(100, 100); Ctx. arc(100, 100, 50, math. PI * 1.5 - math. PI * 2 * 70/100, math. PI * 1.5 - math. PI * 2 * 100/100, true); ctx.closePath(); ctx.fillStyle = "#098765"; ctx.fill(); // change the circle graph to ctx.beginPath(); ctx.arc(100, 100, 30, 0,Math.PI * 2, false); ctx.closePath(); ctx.fillStyle = "#000"; ctx.fill(); }}; por.init(); </script> </html>Copy the code