HTML <canvas> 项目 画个房子
在 HTML、CSS、JS 拼搏 30 余载，终于，有了自己的房子。👏👏👏
这是设计图，请收好！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>房子</title>
<style>canvas { background: #ecf0f1; } div { margin-bottom: 10px; }</style>
</head>
<body>
<h3>画个房子</h3>
<div>
<canvas id="canvas" width="300" height="300"></canvas>
</div>
<div>
<button id="draw-roof-btn">画个屋顶</button>
<button id="draw-wall-btn">画个墙壁</button>
<button id="draw-door-btn">画个大门</button>
</div>
<script>
const canvas = document.querySelector("#canvas")
const ctx = canvas.getContext("2d")
ctx.lineWidth = 1;
const drawRoofBtn = document.querySelector("#draw-roof-btn")
const drawWallBtn = document.querySelector("#draw-wall-btn")
const drawDoorBtn = document.querySelector("#draw-door-btn")
// 画屋顶
drawRoofBtn.onclick = (event) => {
ctx.beginPath();
ctx.strokeStyle = "red"
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
}
// 画墙壁
drawWallBtn.onclick = (event) => {
ctx.beginPath()
ctx.strokeStyle = "green"
ctx.strokeRect(75, 140, 150, 110);
}
// 画大门
drawDoorBtn.onclick = (event) => {
ctx.beginPath()
ctx.fillStyle = "blue"
ctx.fillRect(130, 190, 40, 60);
}
</script>
</body>
</html>
Huajianketang builds a colorful house.
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？