HTML5 的畫布（Canvas）元素是一個可以用 JavaScript 來繪制圖形的容器，它提供了繪制直線、矩形、圓形、弧線、多邊形等形狀的 API 接口，既可用于創建游戲、動畫、圖形編輯器，也可用于實現數據可視化和圖表繪制等功能。下面是一些 HTML5 畫布的基本代碼：

<canvas id="myCanvas" width="500" height="500"></canvas> // 創建一個 500x500 的畫布
var canvas = document.getElementById("myCanvas"); // 獲取畫布對象
var ctx = canvas.getContext("2d"); // 獲取畫布的繪制上下文
// 繪制一個填充色為紅色，邊框顏色為黑色的矩形
ctx.fillStyle = "#ff0000"; // 設置填充色
ctx.strokeStyle = "#000000"; // 設置邊框顏色
ctx.lineWidth = 2; // 設置邊框線條寬度
ctx.fillRect(50, 50, 100, 100); // 繪制矩形
ctx.strokeRect(50, 50, 100, 100); // 繪制矩形邊框
// 繪制一個圓形
ctx.beginPath(); // 開始路徑
ctx.arc(250, 250, 50, 0, Math.PI * 2); // 繪制圓形
ctx.fillStyle = "#00ff00"; // 設置填充色
ctx.fill(); // 填充圓形
// 繪制一條直線
ctx.beginPath(); // 開始路徑
ctx.moveTo(100, 300); // 起點坐標
ctx.lineTo(400, 300); // 終點坐標
ctx.strokeStyle = "#0000ff"; // 設置線條顏色
ctx.lineWidth = 3; // 設置線條寬度
ctx.stroke(); // 繪制線條

以上代碼展示了如何創建一個寬高為 500x500 的畫布，并且使用畫布的 API 繪制了一個矩形、圓形和一條直線。使用 HTML5 畫布可以繪制出非常精美的圖形，有了畫布元素和 JavaScript 的支持，開發者不僅能夠展現出更好的視覺效果，還能實現更復雜的交互功能。