图片
直接上代码fill 实现
<!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>test1</title>
</head>
<style>
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"); //渲染上来一个canvas 多个canvas 的时候注意 id 防止重复
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 = [
[por.x, por.y, por.r, Math.PI * 1.5 - Math.PI * 2 * 0, Math.PI * 1.5 - Math.PI * 2 * 60 / 100, true, "#845216", true],
[por.x, por.y, por.r, Math.PI * 1.5 - Math.PI * 2 * 60 / 100, Math.PI * 1.5 - Math.PI * 2 * 70 / 100, true, "#090765", true],
[por.x, por.y, por.r, Math.PI * 1.5 - Math.PI * 2 * 70 / 100, Math.PI * 1.5 - Math.PI * 2 * 100 / 100, true, "#098765", true],
[por.x, por.y, por.r - 20, 0, Math.PI * 2, false, "#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("美女人数：9999 W", por.x, por.y);
}
};
por.init();
/**
* 添加一个圆 or 扇形
* x,y,r start,end bo正负，颜色，ctx对象
* */
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>
持续更新
