HTML5 图形和数据可视化秘籍
<!DOCTYPE html>
<html>
<head>
<title>HTML5 图形和数据可视化秘籍（三）</title>
<meta charset="utf-8">
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>圆形图表示例</h1>
<canvas id="circleChart" width="200" height="200"></canvas>
<script>
// 获取 canvas 元素并设置上下文
var canvas = document.getElementById('circleChart');
var ctx = canvas.getContext('2d');
// 绘制背景圆
ctx.beginPath();
ctx.arc(100, 100, 90, 0, 2 * Math.PI);
ctx.fillStyle = '#ddd';
ctx.fill();
// 绘制数据表示
var value = 70; // 示例数据
var startAngle = -0.5 * Math.PI; // 起始角度
var endAngle = 1.5 * Math.PI; // 结束角度
var innerRadius = 45; // 内半径
var outerRadius = 60; // 外半径
// 绘制数据圆弧
ctx.beginPath();
ctx.arc(100, 100, outerRadius, startAngle, endAngle);
ctx.arc(100, 100, innerRadius, endAngle, startAngle, true);
ctx.closePath();
ctx.fillStyle = 'blue';
ctx.fill();
// 绘制文本
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = '20px Arial';
ctx.fillText(value + '%', 100, 100);
</script>
</body>
</html>这段代码使用了HTML5 <canvas> 元素来创建一个简单的圆形图表，用以表示一个百分比数据。它演示了如何使用arc()方法绘制圆弧，并使用fillText()方法在圆中心位置写入文本。这个例子对于理解如何在HTML5 Canvas上绘制简单图形和添加数据有很好的教育意义。
评论已关闭