当前位置：首页 > JavaScript

js实现箭头

2026-04-05 06:19:01JavaScript

使用SVG实现箭头

SVG是一种矢量图形格式，适合绘制各种形状包括箭头。通过SVG的<path>元素可以定义箭头的形状。

<svg width="100" height="100" viewBox="0 0 100 100">
  <path d="M10 50 L90 50 M90 50 L70 30 M90 50 L70 70" stroke="black" stroke-width="2" fill="none"/>
</svg>

使用CSS实现箭头

CSS的伪元素和边框属性可以组合出箭头效果。这种方法适合简单的箭头需求。

js实现箭头

.arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid black;
}

使用Canvas绘制箭头

Canvas提供了更灵活的绘图能力，适合动态生成的箭头。

js实现箭头

const canvas = document.getElementById('arrowCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(50, 10);
ctx.lineTo(50, 30);
ctx.lineTo(90, 10);
ctx.lineTo(50, -10);
ctx.lineTo(50, 10);
ctx.closePath();
ctx.fillStyle = 'black';
ctx.fill();

使用Unicode字符显示箭头

简单的箭头可以使用Unicode字符快速实现。

console.log('→'); // 右箭头
console.log('↑'); // 上箭头
console.log('↓'); // 下箭头
console.log('←'); // 左箭头

使用第三方库绘制箭头

像D3.js这样的库提供了更高级的箭头绘制功能。

import * as d3 from 'd3';
const svg = d3.select('body').append('svg');
svg.append('path')
  .attr('d', 'M0 0 L100 0 L80 20 L100 40 L0 40 Z')
  .attr('fill', 'black');

每种方法都有其适用场景，SVG适合静态图形，CSS适合简单效果，Canvas适合动态绘图，Unicode适合文本环境，第三方库适合复杂需求。