前端实现速度线

功能

前端实现速度线，在矩形内生成黑白三角形且闪动。
思路

速度线可以使用多个角度相同的三角形分解矩形。三角形的渲染使用canvas连线fill就行，三角形在矩形上的两个点可以通过计算每个三角形的边长来获取。三角形在矩形上的边长使用三角函数获取。

• HTML结构：包含一个画布（Canvas）用于显示图片。
  
• CSS样式：定义了页面的基本布局和样式，并设置了画布的大小和边框。
  
• JavaScript功能：
  
  
  
  • 处理三角形点、颜色。
    
  • 循环更改颜色并渲染。
    
  
  

实现

HTML结构

添加canvas元素

1.       SpeedLine   

复制代码

JavaScript

获取canvas元素和canvas渲染上下文，初始化三角形，绘制填充的三角形，循环动画

使用三角函数可以根据矩形长宽获取矩形中心点到矩形四个顶点的夹角，根据三角形数量参数获得每个三角形的角度。
使用Math.tan传的参数是弧度，弧度 = 角度 * PI / 180。
不需要求出所有三角形在矩形上的那一边宽度，只需要求得左上半边和上左半边的三角形边宽度再镜像计算。

1. [/code][size=5]2025年4月3日 完善功能[/size]
3. [size=5]功能[/size]
5. [list]
6. [*]完成在三角形区域内生成随机宽度的三角形
7. [*]添加动画渲染模式
8. [/list][size=5]思路[/size]
10. 实现功能1，写一个生成两个随机数数组的方法（generateRandomNum），在triangles根据不同位置生成三角形时带入相应的x2，x3或者y2，y3获取位置赋值即可。
11. generateRandomNum中，num1 < num2 时，返回的数组为顺序排序否则为倒序排序，使用sort和reverse方法即可。
12. 实现功能2，定义动画渲染模式的变量或者定量（mode），在定时器中绘制三角形时判断mode分为三种执行逻辑。
13. [list]
14. [*]循环改变颜色，循环替换相邻三角形的颜色
15. [*]重新生成颜色，使用generateRandomHex方法返回的随机色替换之前的颜色
16. [*]重新初始化，triangles设置为空，调用initTriangle方法
17. [/list][size=5]实现[/size]
19. [size=4]JavaScript[/size]
21. [code]/**   * 生成两个随机数，根据num1和num2的大小关系决定生成的随机数范围和排序方式   * @param {number} num1 - 第一个数字，用于确定随机数的范围   * @param {number} num2 - 第二个数字，用于确定随机数的范围   * @returns {Array} - 包含两个随机数的数组，根据num1和num2的大小关系决定是否排序或逆序   */  function generateRandomNum(num1, num2) {    // 计算两个数字之间的差值，用于确定随机数的范围    const diff = Math.abs(num1 - num2);        // 如果num1小于num2，生成两个在[num1, num2)范围内的随机数，并按升序排列    if (num1 < num2) {      return [        Math.floor(Math.random() * diff + num1),        Math.floor(Math.random() * diff + num1),      ].sort()    }        // 如果num1大于num2，生成两个在[num2, num1)范围内的随机数，并按降序排列    else if (num1 > num2) {      return [        Math.floor(Math.random() * diff + num2),        Math.floor(Math.random() * diff + num2),      ].sort().reverse()    }        // 如果num1等于num2，直接返回传入的参数，因为没有足够的范围来生成随机数    else {      return arguments    }  }/**   * 动画渲染模式：   * 0：相邻三角形颜色替换   * 1：三角形随机颜色   * 2：三角形重新初始化  */  const mode = 1;  setInterval(() => {    // 清除画布    ctx.clearRect(0, 0, canvas.width, canvas.height);    // 绘制三角形    if (mode === 0) {      // 循环改变颜色      triangles.forEach((e, i) => {        let colorIndex = count + i        if (colorIndex >= triangles.length) {          colorIndex = colorIndex - triangles.length        }        drawFilledTriangle(e.x1, e.y1, e.x2, e.y2, e.x3, e.y3, triangles[colorIndex].color);      })    } else if (mode === 1) {      // 重新生成颜色      triangles.forEach((e, i) => {        let color = generateRandomHex(2, true);        e.color = color;        drawFilledTriangle(e.x1, e.y1, e.x2, e.y2, e.x3, e.y3, e.color);      })    } else if (mode === 2) {      // 重新初始化      triangles = [];      initTriangle();      triangles.forEach((e, i) => {        drawFilledTriangle(e.x1, e.y1, e.x2, e.y2, e.x3, e.y3, e.color);      })    }    // 循环改变颜色count    if (count === 0) {      addFlag = true;    } else if (count === repeatCount) {      addFlag = false;    }    if (addFlag) {      count++;    } else {      count--;    }  }, repeatTime)

复制代码

全部代码

1.       speed-line   

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！