HTML5是一種超文本標記語言，它提供了一些新功能，其中包括繪圖功能。對于那些對網頁畫圖設計有興趣的人來說，HTML5可以讓他們更容易設計各種想象中的形狀和線條。以下是一些HTML5畫圖設計的代碼示例。

//繪制矩形
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,80);
ctx.stroke();
</script>

上述代碼將創建一個200像素寬，100像素高的畫布，并在畫布上繪制一個矩形。該矩形的邊距是20，寬度是150，高度是80。

//繪制圓形
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,50,40,0,2*Math.PI);
ctx.stroke();
</script>

上述代碼將創建一個200像素寬，100像素高的畫布，并在畫布上繪制一個半徑為40像素的圓形。該圓形的中心是(100,50)。

//繪制線條
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(20,20);
ctx.lineTo(180,80);
ctx.stroke();
</script>

上述代碼將創建一個200像素寬，100像素高的畫布，并在畫布上繪制一條從(20,20)到(180,80)的線條。

//填充顏色
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,200,100);
</script>

上述代碼將創建一個200像素寬，100像素高的畫布并用紅色填充整個畫布。

通過這些簡單的代碼示例，你可以開始使用HTML5為你的網頁添加繪圖功能。HTML5提供了各種繪圖函數和選項，可以滿足各種設計需求。花費一些時間熟悉這些繪圖功能的使用方法將使你的網頁變得更加吸引人。