在HTML5中,可以使用canvas元素來畫橢圓。下面是一個示例代碼:
<canvas id="myCanvas" width="200" height="100"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radiusX = 75; var radiusY = 25; context.beginPath(); context.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI); context.stroke(); </script>
在這個代碼中,我們首先創建了一個id為“myCanvas”的canvas元素,并指定了它的寬度和高度。然后,我們通過JavaScript獲取了這個canvas元素,并使用getContext("2d")方法獲取了一個2D上下文對象。
接著,我們定義了橢圓的中心點坐標(centerX和centerY)以及橢圓的半徑(radiusX和radiusY)。然后,我們調用了beginPath方法開始一個新的路徑,并調用了ellipse方法來繪制橢圓。
ellipse方法接受7個參數,分別是中心點坐標、半徑、旋轉角度和起始角度、終止角度。在本例中,我們將旋轉角度設置為0,起始角度和終止角度都設置為2 * Math.PI(即360度),從而繪制一個完整的橢圓。最后,我們調用了stroke方法來繪制出橢圓的邊框。
上一篇php怎么應用css樣式
下一篇html5畫布畫菱形代碼