canvas动态绘制运行轨迹
时间: 2023-11-10 15:02:22 浏览: 48
要在canvas中绘制运行轨迹,可以按照以下步骤进行操作:
1. 创建canvas元素并获取其上下文对象:
```javascript
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
```
2. 定义轨迹的初始位置和帧数:
```javascript
var x = 0;
var y = canvas.height / 2;
var frameCount = 0;
```
3. 创建一个函数来绘制运行轨迹:
```javascript
function drawTrail() {
// 用透明色填充整个画布
ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绘制轨迹点
ctx.beginPath();
ctx.arc(x, y, 5, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
// 更新轨迹位置
x += 5;
y = canvas.height / 2 + Math.sin(frameCount * 0.05) * 50;
// 增加帧数
frameCount++;
}
```
4. 使用requestAnimationFrame函数在canvas中循环绘制轨迹:
```javascript
function loop() {
drawTrail();
requestAnimationFrame(loop);
}
loop();
```
这样,就可以在canvas中动态绘制运行轨迹了。你可以根据需要调整轨迹的起始位置、颜色、绘制速度等参数。