const canvas = {
ctx: null,
arr: [],
isTrue: true,
draw: (canvasEl) => {
canvas.arr = [];
canvas.ctx = canvasEl.getContext("2d");
canvasEl.onclick = (ev) => {
if (!canvas.isTrue) {
return;
}
if (canvas.arr.length > 1) {
if (
ev.offsetX <= canvas.arr[0].x + 10 &&
ev.offsetX >= canvas.arr[0].x - 10 &&
ev.offsetY <= canvas.arr[0].y + 10 &&
ev.offsetY >= canvas.arr[0].y - 10
) {
canvas.arr.push({
x: canvas.arr[0].x,
y: canvas.arr[0].y,
circle: false,
});
} else {
canvas.arr.push({
x: ev.offsetX,
y: ev.offsetY,
circle: true,
});
}
} else {
canvas.arr.push({
x: ev.offsetX,
y: ev.offsetY,
circle: true,
});
}
canvas.ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
canvas.arr.forEach((el, index) => {
canvas.ctx.beginPath();
if (el.circle) {
canvas.ctx.arc(el.x, el.y, 3, 0, Math.PI * 2, true);
}
canvas.ctx.fillStyle = "rgba(237, 241, 192)";
canvas.ctx.fill();
});
canvas.ctx.beginPath();
canvas.arr.forEach((el, index) => {
if (index == 0) {
canvas.ctx.moveTo(el.x, el.y);
} else {
canvas.ctx.lineTo(el.x, el.y);
}
});
canvas.ctx.fillStyle = "rgba(237, 241, 192,0.5)";
canvas.ctx.strokeStyle = "#fff100";
canvas.ctx.stroke();
if (canvas.arr.length > 1) {
if (
canvas.arr[canvas.arr.length - 1].x <= canvas.arr[0].x + 10 &&
canvas.arr[canvas.arr.length - 1].x >= canvas.arr[0].x - 10 &&
canvas.arr[canvas.arr.length - 1].y <= canvas.arr[0].y + 10 &&
canvas.arr[canvas.arr.length - 1].y >= canvas.arr[0].y - 10
) {
canvas.ctx.fill();
canvas.isTrue = false;
}
}
};
},
clearDraw(canvasEl) {
canvas.arr = [];
canvas.isTrue = true;
if (canvas.ctx) {
canvas.ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
}
}
}
export default canvas
//直接引入调用draw方法传入元素就可以在元素中绘制了
canvas根据点绘制多边形
最新推荐文章于 2024-08-12 13:18:32 发布