用canvas做会动的条形图
时间: 2023-11-10 14:08:27 浏览: 41
好的,以下是一个用 Canvas 制作的动态条形图的示例代码:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态条形图</title>
<style type="text/css">
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
JS 代码:
```js
$(function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var barHeight = 20; // 条形的高度
var barWidth = 0; // 条形的宽度
var barMargin = 5; // 条形之间的间距
var barPadding = 10; // 条形的内边距
var data = [50, 70, 90, 110, 130]; // 数据
var maxData = Math.max.apply(null, data); // 数据的最大值
var canvasWidth = canvas.width; // 画布的宽度
var canvasHeight = barHeight * data.length + barMargin * (data.length - 1) + barPadding * 2; // 画布的高度
var animationSpeed = 5; // 动画的速度
var currentWidth = 0; // 当前条形的宽度
canvas.height = canvasHeight;
function drawBar(x, y, width, height, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
}
function draw() {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
for (var i = 0; i < data.length; i++) {
var barX = barPadding;
var barY = i * (barHeight + barMargin) + barPadding;
var barColor = "#2ecc71";
if (currentWidth >= ((data[i] / maxData) * (canvasWidth - barPadding * 2))) {
barWidth = ((data[i] / maxData) * (canvasWidth - barPadding * 2));
} else {
barWidth += animationSpeed;
}
drawBar(barX, barY, barWidth, barHeight, barColor);
}
if (currentWidth < ((maxData / maxData) * (canvasWidth - barPadding * 2))) {
currentWidth += animationSpeed;
}
requestAnimationFrame(draw);
}
draw();
});
```
这个示例代码会生成一个带有动画效果的条形图,它会根据数据的大小自动调整条形的宽度,并且会有一个缓慢增加的动画效果。你可以根据自己的需求调整代码中的一些参数,比如条形的高度、间距、内边距、动画速度等。