HTML是一門標記語言,可以用來組織和呈現文檔。下面是一段用HTML代碼畫五角星的方法。
<!DOCTYPE html> <html> <head> <title>畫五角星</title> </head> <body> <canvas id="starCanvas" width="100" height="100"></canvas> <script> var starCanvas = document.getElementById("starCanvas"); var ctx = starCanvas.getContext("2d"); ctx.fillStyle = "black"; ctx.beginPath(); ctx.moveTo(50, 0); ctx.lineTo(63, 37); ctx.lineTo(100, 37); ctx.lineTo(72, 59); ctx.lineTo(84, 96); ctx.lineTo(50, 75); ctx.lineTo(16, 96); ctx.lineTo(28, 59); ctx.lineTo(0, 37); ctx.lineTo(37, 37); ctx.closePath(); ctx.fill(); </script> </body> </html>
首先在HTML中創建一個canvas元素,準備用來繪制五角星。設置canvas的寬度和高度為100像素。
在script標簽中使用JavaScript代碼獲取canvas元素和繪圖上下文。然后指定繪圖上下文的填充顏色為黑色。
接下來,使用beginPath方法開始繪制路徑。從畫布中心點50,0處開始向下繪制一條線,到達五角星下部分的交點。然后通過連接終點和新點,繪制出五角星的五個角落。最后使用closePath方法使路徑封閉。最后使用fill方法將路徑填充為黑色,從而完成五角星的繪制。
以上就是用HTML代碼繪制五角星的方法,希望對您有所幫助。
上一篇html畫盒子模型代碼
下一篇html畫冰墩墩代碼