当前位置：首页 > JavaScript

js实现画三角形

2026-01-31 12:13:44JavaScript

使用Canvas绘制三角形

在HTML5中，Canvas API提供了一种简单的方法来绘制图形。通过JavaScript操作Canvas，可以轻松绘制各种形状，包括三角形。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  ctx.beginPath();
  ctx.moveTo(100, 50);   // 起点
  ctx.lineTo(50, 150);   // 第二个点
  ctx.lineTo(150, 150);  // 第三个点
  ctx.closePath();       // 闭合路径
  ctx.stroke();          // 绘制边框
</script>

使用SVG绘制三角形

SVG是另一种在网页上绘制矢量图形的方法。可以通过HTML直接嵌入SVG元素来创建三角形。

<svg width="200" height="200">
  <polygon points="100,50 50,150 150,150" 
           stroke="black" 
           stroke-width="1" 
           fill="none"/>
</svg>

使用CSS绘制三角形

CSS可以通过边框技巧创建三角形效果，这种方法常用于工具提示等UI元素。

<div class="triangle"></div>
<style>
  .triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid black;
  }
</style>

使用WebGL绘制三角形

对于更复杂的3D图形，可以使用WebGL API。以下是使用WebGL绘制三角形的简单示例。

<canvas id="glCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('glCanvas');
  const gl = canvas.getContext('webgl');

  const vertices = [
    0.0, 0.5, 0.0,
    -0.5, -0.5, 0.0,
    0.5, -0.5, 0.0
  ];

  const vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  const vertexShaderSource = `
    attribute vec3 coordinates;
    void main() {
      gl_Position = vec4(coordinates, 1.0);
    }
  `;

  const fragmentShaderSource = `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
  `;

  // 编译着色器程序...
  // 绘制三角形...
</script>

使用D3.js绘制三角形

D3.js是一个强大的数据可视化库，也可以用来绘制基本图形。

js实现画三角形

<svg width="200" height="200"></svg>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
  const svg = d3.select('svg');

  svg.append('polygon')
     .attr('points', '100,50 50,150 150,150')
     .attr('stroke', 'black')
     .attr('fill', 'none');
</script>

每种方法都有其适用场景：Canvas适合动态图形，SVG适合可缩放的矢量图形，CSS适合简单的UI元素，WebGL适合3D图形，D3.js适合数据可视化。根据具体需求选择最合适的方法。