canvas 按照一定的时间完成动画
时间: 2023-08-03 17:29:41 浏览: 61
要在 Canvas 中实现动画,可以使用 `requestAnimationFrame` 方法来实现。这个方法可以让浏览器在下一次重绘之前调用指定的函数,从而实现动画效果。
下面是一个简单的示例代码,用于在 Canvas 中绘制一条移动的直线:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas 动画</title>
<style>
#myCanvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 设置画布尺寸为屏幕宽高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 设置起点和终点坐标
let startX = 100;
const startY = 100;
const endX = window.innerWidth - 100;
const endY = window.innerHeight - 100;
// 设置运动速度
const speed = 100; // 每秒移动的像素数
// 计算运动方向和距离
const distance = Math.sqrt((endX - startX) ** 2 + (endY - startY) ** 2);
const directionX = (endX - startX) / distance;
const directionY = (endY - startY) / distance;
const duration = distance / speed * 1000; // 运动时间,单位为毫秒
// 动画函数
function animate(timestamp) {
// 如果起点已经到达终点,则停止动画
if (startX >= endX) {
return;
}
// 计算当前时间和起始时间的差值
const currentTime = timestamp || new Date().getTime();
const startTime = currentTime - duration;
const elapsedTime = currentTime - startTime;
// 计算当前位置
startX = startX + directionX * elapsedTime / 1000 * speed;
// 清空画布并绘制直线
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.strokeStyle = "#000000";
ctx.lineWidth = 2;
ctx.stroke();
// 继续执行动画
requestAnimationFrame(animate);
}
// 启动动画
requestAnimationFrame(animate);
</script>
</body>
</html>
```
在这个示例中,我们首先在 HTML 中创建一个 Canvas 元素,并为其定义一个 ID。然后在 CSS 中设置了页面和 Canvas 的尺寸。接着在 JavaScript 中获取这个元素,并获取其 2D 渲染上下文。然后,我们设置起点和终点坐标,以及运动速度。接着,我们计算运动方向和距离,以及运动时间。然后,我们定义了一个 `animate` 函数,用于实现动画效果。在这个函数中,我们首先判断起点是否已经到达终点,如果是则停止动画。接着,我们计算当前时间和起始时间的差值,以及当前的位置。然后,我们清空画布并绘制直线。最后,我们使用 `requestAnimationFrame` 方法来实现动画的连续播放。