创建宽高100%的Canvas画布在画布内随机绘制A、B两点e从A点到B点之间以路径形式执行一个过程动画,并获得路径中的每一个点位< 能设置路线的起始角度,能设置曲线的回落点位。“例:起始角度为45度,回落起始点位为AB两点行程的40%处代
时间: 2024-02-26 07:58:25 浏览: 19
好的,这是一个比较复杂的问题,需要分步骤来实现。首先,我们需要创建一个宽高100%的Canvas画布:
```html
<canvas id="canvas" style="width: 100%; height: 100%;"></canvas>
```
然后在JavaScript中获取canvas元素,并且设置画布的宽高:
```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
```
接下来,我们需要在画布中随机绘制A、B两点。这里我们可以使用`Math.random()`函数来生成随机数:
```javascript
const A = { x: Math.random() * canvas.width, y: Math.random() * canvas.height };
const B = { x: Math.random() * canvas.width, y: Math.random() * canvas.height };
```
然后,我们需要绘制A、B两点。这里我们可以使用`ctx.beginPath()`和`ctx.arc()`函数来绘制一个圆:
```javascript
ctx.beginPath();
ctx.arc(A.x, A.y, 10, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.beginPath();
ctx.arc(B.x, B.y, 10, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
```
接下来,我们需要执行一个路径动画,从A点到B点。这里我们可以使用`requestAnimationFrame()`函数来循环执行动画,并且使用`ctx.lineTo()`函数来绘制路径:
```javascript
let progress = 0;
const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(A.x, A.y, 10, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.beginPath();
ctx.arc(B.x, B.y, 10, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.beginPath();
const dx = B.x - A.x;
const dy = B.y - A.y;
const angle = Math.atan2(dy, dx);
const distance = Math.sqrt(dx * dx + dy * dy);
const fallBack = distance * 0.4;
const fallBackX = A.x + Math.cos(angle) * fallBack;
const fallBackY = A.y + Math.sin(angle) * fallBack;
ctx.moveTo(A.x, A.y);
ctx.lineTo(fallBackX, fallBackY);
progress += distance / 1000;
const x = A.x + Math.cos(angle) * progress;
const y = A.y + Math.sin(angle) * progress;
ctx.lineTo(x, y);
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
ctx.stroke();
if (progress < distance) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
```
在动画中,我们使用`Math.atan2()`函数来计算A点到B点的角度,并且使用`Math.sqrt()`函数来计算A点到B点的距离。然后,我们使用这些值来计算回落点位的坐标,并且在路径中加入这个点。最后,在动画中,我们使用`progress`变量来记录动画的进度,并且在每一帧中更新路径的终点坐标。当进度达到距离时,动画结束。
最后,我们需要获取路径中的每一个点位。这里我们可以在动画中,将路径中的每一个点位保存到一个数组中:
```javascript
const points = [];
const animate = () => {
// ...
points.push({ x, y });
// ...
}
```
这样,当动画结束时,`points`数组中就保存了路径中的所有点位。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)