HTML5畫布是一種用于在網頁中繪制圖像的技術。它提供了一個靈活的平臺，可以使用JavaScript編寫交互式應用程序和游戲。在本文中，我們將介紹一個簡單的HTML5畫布房屋代碼。

<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 畫代表房屋的矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(150, 150, 300, 200);
// 畫房屋的門
ctx.fillStyle = "#0000FF";
ctx.fillRect(250, 300, 100, 50);
// 畫房屋的窗戶
ctx.fillStyle = "#FFFF00";
ctx.fillRect(200, 200, 50, 50);
ctx.fillRect(350, 200, 50, 50);
// 畫房屋的屋頂
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(300, 50);
ctx.lineTo(450, 150);
ctx.closePath();
ctx.fillStyle = "#00FF00";
ctx.fill();
</script>

這個代碼使用了HTML5畫布元素來繪制一個房屋。首先，我們創建一個canvas元素，并指定它的寬度和高度。然后，我們使用JavaScript獲取畫布的上下文并將其存儲在ctx變量中。

接下來，我們使用fillRect方法畫出矩形，表示房屋的主體。我們使用fillStyle屬性指定填充顏色。然后，我們使用fillRect方法畫出門和窗戶，以及使用fillStyle屬性指定它們的顏色。

最后，我們使用beginPath方法開始繪制屋頂的路徑。我們用moveTo方法移動筆觸的起點，然后使用lineTo方法畫出兩個線段，最后使用closePath方法結束路徑。我們使用fillStyle屬性指定屋頂的填充顏色，并使用fill方法填充繪制屋頂的路徑。

HTML5畫布是一個強大的工具，可用于實現各種可視化效果和交互式應用程序。如果您想了解更多關于HTML5畫布的細節，請繼續學習并探索這個令人興奮的技術！