HTML5五角星是一種常見的圖形效果,用于網頁設計和展示。如下是五角星的簡單HTML5代碼:
<canvas id="star" width="50" height="50"></canvas> <script> var canvas = document.getElementById("star"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(25,0); ctx.lineTo(35,20); ctx.lineTo(50,25); ctx.lineTo(35,30); ctx.lineTo(25,50); ctx.lineTo(15,30); ctx.lineTo(0,25); ctx.lineTo(15,20); ctx.closePath(); ctx.fillStyle = "gold"; ctx.fill(); </script>
代碼中通過canvas元素創建一個畫布,并獲取畫布的2D上下文。然后使用beginPath()方法開始繪制路徑,使用moveTo(x,y)方法指定起始點,使用lineTo(x,y)方法繪制線條,并使用closePath()方法閉合路徑,形成五角星的樣式。最后使用fillStyle屬性設置填充顏色,使用fill()方法進行填充,完成五角星的繪制。
上一篇智慧學院css模型
下一篇mysql中插入時間數據