HTML5 Canvas动态画饼状图详解及示例

"这篇文章主要展示了如何使用HTML5的canvas元素动态绘制饼状图的示例代码，无需依赖jQuery等第三方库。通过简单的DOM操作和canvas的API，可以创建出具有不同颜色扇区的饼状图。" 在HTML5中，canvas元素是一个强大的图形绘制工具，允许开发者在网页上进行动态图形编程。在这个示例中，我们将学习如何利用canvas API来绘制饼状图，这是一种常见的数据可视化方式，用于表示各项占比。 1. 创建canvas元素 首先，我们需要在HTML文档中创建一个canvas元素，并通过JavaScript获取其2D渲染上下文（context）： ```javascript var canvas = document.createElement("canvas"); var ctx = canvas.getContext('2d'); ``` 2. 绘制实心圆 绘制饼状图的基础是实心圆，我们可以使用`beginPath()`、`arc()`、`fillStyle`和`fill()`方法来实现： ```javascript ctx.beginPath(); ctx.arc(圆心x轴坐标, 圆心y轴坐标, 半径, 0, 2 * Math.PI); // 0和2 * Math.PI代表完整的一圈 ctx.fillStyle = 'green'; ctx.closePath(); ctx.fill(); ``` 这里的`arc()`方法接收五个参数：圆心的x、y坐标，半径，起始角度（通常为0，即3点钟方向），结束角度以及是否逆时针绘制（默认为false，即顺时针）。 3. 绘制不同颜色的扇区 为了创建饼状图的效果，我们需要根据每个扇区的占比计算出相应的角度，并用不同的颜色填充。假设我们有四个颜色（绿色、红色、黄色和紫色），我们可以依次绘制每个扇区： ```javascript // 示例数据：各颜色占比 var data = [0.3, 0.25, 0.2, 0.25]; // 总和角度 var totalAngle = 2 * Math.PI; for (var i = 0; i < data.length; i++) { var angle = data[i] * totalAngle; // 开始角度 = 上一个扇区结束角度 var startAngle = i === 0 ? 0 : data.slice(0, i).reduce((a, b) => a + b) * totalAngle; ctx.beginPath(); ctx.arc(圆心x轴坐标, 圆心y轴坐标, 半径, startAngle, startAngle + angle); ctx.fillStyle = ['green', 'red', 'yellow', 'purple'][i]; ctx.closePath(); ctx.fill(); } ``` 4. 动态绘制 为了使饼状图动态显示，我们可以使用`requestAnimationFrame`方法。它会在浏览器下一次重绘之前调用指定的函数，创建平滑的动画效果。例如，我们可以让饼状图的扇区逐渐展开： ```javascript function drawPieStep(currentIndex) { if (currentIndex >= data.length) return; // 计算当前扇区角度 var angle = data[currentIndex] * totalAngle; // 开始角度 var startAngle = currentIndex === 0 ? 0 : data.slice(0, currentIndex).reduce((a, b) => a + b) * totalAngle; ctx.beginPath(); ctx.arc(圆心x轴坐标, 圆心y轴坐标, 半径, startAngle, startAngle + angle); ctx.fillStyle = ['green', 'red', 'yellow', 'purple'][currentIndex]; ctx.closePath(); ctx.fill(); // 继续绘制下一个扇区 requestAnimationFrame(() => drawPieStep(currentIndex + 1)); } // 开始动态绘制 drawPieStep(0); ``` 以上代码片段展示了如何使用HTML5 canvas绘制饼状图的基本步骤，包括静态和动态的方式。在实际应用中，你可能还需要处理鼠标交互，如点击扇区获取数据详情，或者添加更复杂的动画效果。此外，还可以通过计算每个扇区的宽度来实现百分比显示，或者调整颜色、半径等属性以满足不同设计需求。