HTML5畫布是一種強大的Web技術，可以通過它來創建各種各樣的幾何圖形和動畫效果。 以下是一些HTML5畫布的幾何圖形代碼示例：

創建一個矩形：

<canvas id="myCanvas" width="200" height="100"></canvas>
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="#FF0000"; //紅色
context.fillRect(0,0,150,75);

創建一個圓形：

<canvas id="myCanvas" width="200" height="100"></canvas>
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath(); //開始路徑
context.arc(100,50,40,0,2*Math.PI); //創建圓形
context.fillStyle="#FF0000"; //紅色
context.fill(); //填充

創建一個三角形：

<canvas id="myCanvas" width="200" height="100"></canvas>
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath(); //開始路徑
context.moveTo(100,0); //移動到起點
context.lineTo(0,100); //向左下角畫線
context.lineTo(200,100); //向右下角畫線
context.closePath(); //閉合路徑
context.fillStyle="#FF0000"; //紅色
context.fill(); //填充

創建一個梯形：

<canvas id="myCanvas" width="200" height="100"></canvas>
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath(); //開始路徑
context.moveTo(0,0); //移動到起點
context.lineTo(150,0); //畫橫線
context.lineTo(200,100); //畫斜線
context.lineTo(50,100); //畫橫線
context.closePath(); //閉合路徑
context.fillStyle="#FF0000"; //紅色
context.fill(); //填充

使用HTML5畫布創建幾何圖形是一項很有趣的任務。它不僅可以增加網站的視覺吸引力，還可以為用戶提供一些交互性。