JavaScript Canvas API 绘制五角大楼结构图
以下是使用JavaScript的Canvas API绘制一张五角大楼结构图的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Pentagon Building</title>
</head>
<body>
<canvas id='myCanvas' width='400' height='400'></canvas>
<script>
// 获取canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 绘制五角大楼结构图
function drawPentagonBuilding() {
// 绘制大楼主体
ctx.fillStyle = '#999999';
ctx.fillRect(50, 100, 300, 200);
// 绘制屋顶
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(200, 20);
ctx.lineTo(350, 100);
ctx.closePath();
ctx.fillStyle = '#CCCCCC';
ctx.fill();
// 绘制窗户
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(80, 130, 80, 80);
ctx.fillRect(240, 130, 80, 80);
// 绘制门
ctx.fillStyle = '#663300';
ctx.fillRect(180, 200, 40, 100);
}
drawPentagonBuilding();
</script>
</body>
</html>
这段代码创建了一个大小为400x400的canvas元素，并使用JavaScript的Canvas API绘制了一个五角大楼的结构图。大楼主体使用灰色填充，屋顶使用浅灰色填充，窗户使用白色填充，门使用深褐色填充。您可以在浏览器中运行这段代码，查看绘制出的五角大楼结构图。
原文地址: https://www.cveoy.top/t/topic/qhAV 著作权归作者所有。请勿转载和采集!