HTML5畫布餅狀圖代碼 餅狀圖是一種常用的數據展示方式，可以幫助人們更直觀地理解數據占比和比例。在HTML5中，我們可以利用畫布(Canvas)元素來實現餅狀圖的繪制。本文將為大家介紹如何使用HTML5畫布繪制一個簡單的餅狀圖。 首先，我們需要在HTML文檔中添加一個畫布元素： `````` 其中id屬性指定了該畫布的唯一標識符，width和height屬性指定了畫布的寬度和高度。接下來，在JavaScript代碼中獲取該畫布元素，并獲取其2D繪圖上下文： ``` var canvas = document.getElementById('myChart'); var ctx = canvas.getContext('2d'); ``` 獲取到畫布上下文之后，我們就可以開始繪制餅狀圖了。下面是完整的繪制代碼： ``` var canvas = document.getElementById('myChart'); var ctx = canvas.getContext('2d'); // 定義數據 var data = [30, 40, 50]; // 定義顏色 var colors = ['#f44336', '#2196f3', '#4caf50']; // 計算數據總和 var total = data.reduce(function(sum, value) { return sum + value; }, 0); // 定義起始角度 var startAngle = 0; // 繪制扇形 for (var i = 0; i< data.length; i++) { var angle = Math.PI * 2 * (data[i] / total); ctx.beginPath(); ctx.moveTo(canvas.width / 2, canvas.height / 2); ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, startAngle, startAngle + angle, false); ctx.closePath(); ctx.fillStyle = colors[i]; ctx.fill(); startAngle += angle; } ``` 以上代碼中，我們首先定義了數據和顏色數組，然后通過reduce方法計算出數據總和。接著，我們定義了起始角度為0，并以此繪制每個扇形。繪制扇形時，我們利用了arc方法來繪制圓弧。最后，我們將起始角度加上當前扇形的角度，以便下一次繪制。 值得注意的是，在繪制扇形時，我們使用了context.fill()方法來填充顏色。如果我們想對扇形進行邊框繪制，可以使用context.stroke()方法。 本文僅是HTML5畫布餅狀圖繪制的入門介紹，更多細節和高級用法可以參考相關文檔和教程。