HTML5動態圖形是一種非常有趣和有用的技術，它能夠讓我們在網頁上顯示出一些特效和動態圖像。代碼示例如下：

我們可以使用Canvas來繪制各種形狀和圖像：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
</script>

上面的代碼演示了如何在Canvas中繪制一個紅色的矩形。可以使用 fillStyle 屬性設置要填充的顏色，使用 fillRect 方法畫出矩形。

除了 Canvas，SVG也是一種常用的圖形技術。SVG使用 XML 來描述二維圖像。例子如下：

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

上面的代碼演示了如何在 SVG 中繪制一個圓形。可以使用 cx 和 cy 屬性來設置圓心的坐標，使用 r 屬性來設置半徑。

除了 Canvas 和 SVG 外，CSS3 也提供了一些非常酷的特效。比如，我們可以使用 CSS3 的動畫來創建一個自動旋轉的立方體：

<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face left">Left</div>
<div class="face right">Right</div>
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>
<style type="text/css">
.cube {
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
animation: rotate 5s linear infinite;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.front { transform: translateZ(50px); }
.back { transform: translateZ(-50px) rotateY(180deg); }
.left { transform: translateX(-50px) rotateY(-90deg); }
.right { transform: translateX(50px) rotateY(90deg); }
.top { transform: translateY(-50px) rotateX(90deg); }
.bottom { transform: translateY(50px) rotateX(-90deg); }
@keyframes rotate {
from { transform: rotateY(0deg); }
to { transform: rotateY(-360deg); }
}
</style>

上面的代碼演示了如何使用 CSS3 的 transform 和 animation 屬性來創建一個旋轉的立方體。可以使用 transform-style 屬性來設置立方體的樣式，使用 animation 屬性來設置旋轉動畫。

總之，HTML5 動態圖形提供了許多強大的工具和技術，讓我們可以在網頁上展示出更加生動有趣的圖像和特效，為用戶帶來更好的體驗。