JavaScript是前端開發的常用工具之一，它不僅可以使網頁動態化，還可以配合CSS來進行畫圖。

<canvas id="myCanvas"></canvas>

在HTML中，我們可以使用canvas標簽來創建一個畫布，可以通過JavaScript來對其進行操作。比如，可以通過以下代碼來繪制一個圓形：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();

這段代碼中，我們首先獲取了ID為“myCanvas”的畫布，然后獲取它的上下文，即用來在畫布上繪制圖形的工具。接著，通過beginPath()方法開始畫路徑，使用arc()方法繪制了一個圓形，并使用stroke()方法將路徑畫出。

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

除了繪制線條和路徑外，我們還可以使用fillRect()方法來繪制矩形。上面的代碼就是在畫布上繪制了一個紅色的矩形。其中，fillStyle屬性用來設置填充顏色，fillRect()方法則用來畫實心矩形。

上述代碼只是繪制圖形的一些基本操作，還有很多其他的方法和屬性可以用來繪制出更加復雜、精細的圖形。同時，配合CSS的樣式調整，我們可以讓這些圖形更加美觀動人。