如何使用HTML 5画布创建这种类型的设计?

Question

大家好，谁能帮助我如何我可以创建这种设计我试图使这个使用Html 5画布，但我的矩形相互重叠，不适合在画布。我附上参考设计和我的设计截图。

这是参考设计

这是我目前所做的

import React, { useEffect, useRef } from "react";
import "./home.css";
const Home = () => {
const canvasRef = useRef(null);
const contextRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
canvas.width = 1000;
canvas.height = 1000;
const context = canvas.getContext("2d");
contextRef.current = context;
drawRect();
}, []);
function drawRect() {
for (let i = 0; i < 1000; i++) {
// contextRef.current.style.width = 5;
contextRef.current.fillStyle = "#FF0000";
contextRef.current.fillRect(
Math.trunc(Math.random() * 1000) + 1,
Math.trunc(Math.random() * 1000) + 1,
6,
15
);
}
for (let i = 0; i < 500; i++) {
contextRef.current.fillStyle = "#fff";
contextRef.current.fillRect(
Math.trunc(Math.random() * 1000) + 1,
Math.trunc(Math.random() * 1000) + 1,
12,
30
);
}
for (let i = 0; i < 250; i++) {
contextRef.current.fillStyle = "#fece2f";
contextRef.current.fillRect(
Math.trunc(Math.random() * 1000) + 1,
Math.trunc(Math.random() * 1000) + 1,
24,
45
);
}
for (let i = 0; i < 50; i++) {
contextRef.current.fillStyle = "#FFB6C1";
contextRef.current.fillRect(
Math.trunc(Math.random() * 1000) + 1,
Math.trunc(Math.random() * 1000) + 1,
36,
60
);
}
for (let i = 0; i < 4; i++) {
contextRef.current.fillStyle = "#ff80ed";
contextRef.current.fillRect(
Math.trunc(Math.random() * 1000) + 1,
Math.trunc(Math.random() * 1000) + 1,
40,
75
);
}
}
return (
<main className="main-content">
*<canvas ref={canvasRef} className="canvas-container"></canvas>
</main>
);
};

export default Home;

和CSS

.main-content {
height: 78vh;
margin: 25px;
border: 1px solid gold;
}
.canvas-container {
width: 100%;
height: 100%;
}

Answer 1

可以在CSS规则中指定适当的z-index来解决重叠问题。

你可以在响应式网页设计中看到一些简单的类似例子，这可能会有所帮助。(特别是城市天际线和毕加索画的台阶)