前端画三角形的两种方法（canvas、border）

weixin_46789870

已于 2024-12-25 14:45:00 修改

阅读量277

点赞数 8

分类专栏：前端文章标签：前端 css javascript css3 面试

于 2024-12-25 14:34:16 首次发布

本文链接：https://blog.csdn.net/weixin_46789870/article/details/144719095

版权

前端专栏收录该内容

7 篇文章

订阅专栏

以下代码直接复制在html文件中使用即可。

这是我面试字节跳动时的原题

实现思路：

宽度和高度设置为 0

代码示例中的 width: 0px; 和 height: 0px;：
首先将元素的宽度和高度都设置为 0 像素，这是因为我们并不依靠常规的宽高尺寸来呈现三角形的形状，而是借助边框来进行构建。这样的设置让元素本身在常规尺寸意义上 “不存在”，但边框依然可以基于这个虚拟的中心位置进行绘制。

下边框设置

border-bottom: 200px solid red;：
这行代码设置了元素的下边框，将其宽度设置为 200 像素，颜色为红色（solid表示实线边框）。这个下边框其实就是三角形的底边，通过给定具体的像素长度，确定了三角形底边的长度以及颜色外观。

左右边框设置

border-left: 100px solid transparent; 和 border-right: 100px solid transparent;：
分别设置了元素的左边框和右边框，宽度均为 100 像素，且颜色为透明（transparent）。这里把左右边框设置为透明是关键，其目的是让它们在视觉上 “隐藏” 起来，只留下由下边框以及左右边框斜边部分构成的三角形形状。实际上，左右边框的斜边部分与下边框组合起来，就形成了一个等腰三角形的两条斜边，其斜边长度由这里设置的 100 像素决定（与下边框的交汇点到左右边框外侧端点的距离），而且由于左右对称设置，最终呈现出等腰三角形的外观。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #triangle {
        width: 0px;
        height: 0px;
        border-bottom: 200px solid red;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
      }
    </style>
  </head>
  <body>
    <!-- 利用canvas画三角形 -->
    <canvas id="myCanvas" width="300" height="300"> </canvas>
    <!-- 利用border画三角形 -->
    <div id="triangle"></div>
    <script>
      // 获取canvas元素
      // 获取canvas元素
      const canvas = document.getElementById("myCanvas");
      // 获取canvas的2D绘图上下文，后续通过它来调用各种绘图方法
      const ctx = canvas.getContext("2d");

      // 定义三角形的顶点坐标
      const x1 = 150; // 三角形顶点的x坐标，这里将三角形放在canvas中心位置的x轴上
      const y1 = 50; // 三角形顶点的y坐标，距离canvas顶部一定距离

      const x2 = 50; // 三角形底边左端点的x坐标
      const y2 = 250; // 三角形底边左端点的y坐标，靠近canvas底部

      const x3 = 250; // 三角形底边右端点的x坐标
      const y3 = 250; // 三角形底边右端点的y坐标，同样靠近canvas底部

      // 开始绘制路径，这是绘制图形的第一步，后续的绘图操作会基于这个路径进行
      ctx.beginPath();
      // 移动画笔到第一个顶点的位置，相当于确定了绘制的起始点
      ctx.moveTo(x1, y1);
      // 绘制一条从当前位置（也就是起始点）到 (x2, y2) 的线段，即三角形的一条边
      ctx.lineTo(x2, y2);
      // 再绘制一条从 (x2, y2) 到 (x3, y3) 的线段，形成三角形的底边
      ctx.lineTo(x3, y3);
      // 最后绘制一条从 (x3, y3) 回到起始顶点 (x1, y1) 的线段，完成三角形的绘制路径
      ctx.lineTo(x1, y1);
      // 关闭路径，将路径的起点和终点连接起来，确保图形是封闭的，对于填充图形来说这很重要
      ctx.closePath();

      // 设置填充颜色，这里设置为蓝色，可以根据喜好修改为其他颜色
      ctx.fillStyle = "red";
      // 对绘制好的封闭路径进行填充，使三角形显示为设定的颜色
      ctx.fill();
      ctx.lineWidth = 5;
      // 绘制图形的轮廓线，也就是按照之前定义的路径绘制线条，显示出三角形的边框
      ctx.stroke();
    </script>
  </body>
</html>