canvas /canvas 是HTML5中新增的標簽，用于繪制圖形，這篇文章主要為大家詳細介紹了HTML5 canvas基本繪圖之繪制五角星方法，感興趣的小伙伴們可以參考一下

canvas /canvas 是HTML5中新增的標簽，用于繪制圖形，實際上，這個標簽和其他的標簽一樣，其特殊之處在于該標簽可以獲取一個CanvasRenderingContext2D對象，我們可以通過JavaScript腳本來控制該對象進行繪圖。

canvas /canvas 只是一個繪制圖形的容器，除了id、html' target='_blank'>class、style等屬性外，還有height和width屬性。在 canvas 元素上繪圖主要有三步：

1.獲取 canvas 元素對應的DOM對象，這是一個Canvas對象；
2.調用Canvas對象的getContext()方法，得到一個CanvasRenderingContext2D對象；
3.調用CanvasRenderingContext2D對象進行繪圖。

通過對五角星分析，我們可以確定各個頂點坐標的規律，這里需要注意的一點是：在canvas中，Y軸的方向是向下的。

相應代碼如下：

var canvas = document.getElementById( canvas  var context = canvas.getContext( 2d  context.beginPath();  //設置是個頂點的坐標，根據頂點制定路徑  for (var i = 0; i i++) {  context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,  -Math.sin((18+i*72)/180*Math.PI)*200+200);  context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,  -Math.sin((54+i*72)/180*Math.PI)*80+200);  context.closePath();  //設置邊框樣式以及填充顏色  context.lineWidth= 3  context.fillStyle = #F6F152  context.strokeStyle = #F5270B  context.fill();  context.stroke();

最后效果：

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP ！

相關推薦：

html5使用canvas實現跟隨光標跳動的火焰效果

使用canvas畫“哆啦A夢”時鐘的代碼

以上就是HTML5 canvas繪制五角星的方法的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。