HTML畫布是HTML5新增的一個標簽，它允許我們使用JavaScript來繪制圖形。在HTML畫布中，我們可以使用多種方法來繪制各種形狀，而且還可以為圖形添加顏色、漸變、陰影等效果。下面是一個HTML畫布的示例代碼，讓我們來一步步看看它是如何繪制一張圖片的。 首先，我們需要在HTML中添加這個畫布的標簽，如下所示：

<canvas id="myCanvas" width="300" height="300"></canvas>

這里我們使用了canvas標簽，并給它指定了一個id和寬高。接下來，我們需要使用JavaScript來獲取這個畫布對象，并創建一個繪圖環境，如下所示：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

這里我們使用了getElementById()函數來獲取畫布對象，然后使用getContext()函數來創建一個繪圖環境。繪圖環境是繪制圖形所必須的一個對象，我們可以使用它來調用畫圖函數。 現在，我們已經創建好了繪圖環境，接下來就可以開始繪制圖片了。假設我們要繪制一張圓形的圖片，可以使用arc()函數來繪制一個圓形路徑，如下所示：

ctx.beginPath();
ctx.arc(150, 150, 100, 0, 2*Math.PI);
ctx.fillStyle = "blue";
ctx.fill();

這里我們使用了beginPath()函數來開始一條路徑，然后使用arc()函數來繪制一個圓形路徑。arc()函數的參數依次為圓心坐標、半徑、起始角度和終止角度。最后，我們使用fillStyle屬性來設置填充顏色，并使用fill()函數來填充路徑。 最后，我們把這個代碼放在一起，就可以繪制出一張圓形的藍色圖片了，如下所示：

<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(150, 150, 100, 0, 2*Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
</script>

以上就是一個簡單的HTML畫布的示例代碼，希望能夠幫助大家了解HTML畫布的使用方法。