The picture
Go directly to the code fill implementation
<! 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; color: #fff; } #main { position: absolute; width: 400px; height: 400px; border: 1px solid #fff; top: 100px; left: 100px; } </style> <body> <div id="main"></div> </body> <script> var por = { x: 200, y: 200, r: 80, init: function () { var main = document.getElementById("main"); InnerHTML = '<canvas ID ="canvasmain" style="position:absolute;" width="' + main.offsetWidth + '" height="' + main.offsetHeight + '"></canvas>'; var canvasmain = document.getElementById("canvasmain"); var ctx = canvasmain.getContext("2d"); canvasmain.addEventListener("click", function (event) { console.log(event) var clX = event.offsetX; var clY = event.offsetY; var enp = { x: clX, y: clY }; for (let i = 0; i < zoreArray.length; i++) { addCanvasCircular(zoreArray[i], ctx, enp); }}); Var zoreArray = [[per. x, per. y, per. r, math. PI * 1.5 - math. PI * 2 * 0, math. PI * 2 * 60/100, true, "#845216", true], [Per. x, per. y, per. r, math. PI * 1.5 - Math. Y, por. R, Math.PI * 1.5 - Math.PI * 2 * 70/100, Math.PI * 1 - Math.PI * 2 * 100/100, true, "#098765", true], [Per. x, per. y, per. r-20, 0, Math. "#000", false], ]; for (let i = 0; i < zoreArray.length; i++) { addCanvasCircular(zoreArray[i], ctx, null); } ctx.font = "bold 9pt Arial"; ctx.fillStyle = "#fff"; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.moveTo(por.x, por.y); Ctx.filltext (" 女人 类 数 : 9999w ", per.x, per.y); }}; por.init(); */ function addCanvasCircular(data, CTX, eventP) {ctx.beginPath(); ctx.moveTo(data[0], data[1]); ctx.arc(data[0], data[1], data[2], data[3], data[4], data[5]); ctx.closePath(); ctx.fillStyle = data[6]; ctx.fill(); if (data[7]) { if (eventP ! = null) { var csz = ctx.isPointInPath(eventP.x, eventP.y) console.log(csz) var datanew = data; datanew[2]+=20; datanew[7] = false; addCanvasCircular(datanew, ctx, eventP); } } } </script> </html>Copy the code
Continuously updated