HTML5是一種很流行的網頁制作語言，除了常見的文字、圖像、鏈接等元素，還可以使用它來繪制圖形。下面我們就來看看如何使用HTML5來實現網頁畫圖。 首先，我們需要在網頁中添加一個畫布(Canvas)元素。代碼如下：

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

接著，在JavaScript代碼中獲取畫布元素，并獲取其繪圖上下文(Context)。代碼如下：

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

現在，我們就可以使用繪圖上下文來繪制各種形狀了。比如，我們可以繪制一個矩形，代碼如下：

context.fillStyle = "#FF0000";
context.fillRect(100, 100, 100, 100);

上述代碼中，fillStyle屬性指定了矩形填充色為紅色。fillRect方法指定該矩形的左上角坐標為(100,100)，寬高分別為100。 除了矩形，我們還可以繪制其他各種形狀，比如圓形、直線、曲線等。代碼如下：

context.beginPath();
context.arc(250, 250, 50, 0, 2 * Math.PI);
context.stroke();
context.beginPath();
context.moveTo(300, 100);
context.lineTo(400, 200);
context.stroke();
context.beginPath();
context.moveTo(450, 450);
context.quadraticCurveTo(500, 400, 550, 450);
context.stroke();

上述代碼分別繪制了一個半徑為50的圓、一條從(300,100)到(400,200)的直線以及一條從(450,450)開始，經過控制點(500,400)，終點為(550,450)的二次貝塞爾曲線。 繪圖也可以和其他HTML元素結合使用，比如可以在鼠標拖動的過程中繪制圖形。代碼如下：

canvas.addEventListener("mousemove", function(event) {
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;
context.beginPath();
context.arc(x, y, 5, 0, 2 * Math.PI);
context.fill();
});

上述代碼中，我們監聽了鼠標移動事件。當鼠標移動時，我們根據鼠標的當前位置計算出圓心坐標，并繪制一個半徑為5的圓。 以上是HTML5畫圖的一些基礎知識和代碼示例。通過深入學習HTML5畫圖，我們可以實現更加復雜、實用的圖形繪制。