当前位置：首页 > JavaScript

js实现画线

2026-03-14 22:49:38JavaScript

使用Canvas API画线

Canvas API是HTML5提供的绘图接口，适用于动态生成图形。在JavaScript中通过获取Canvas元素的上下文进行绘制。

// 获取Canvas元素和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置线条样式
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;

// 开始绘制路径
ctx.beginPath();
ctx.moveTo(50, 50);  // 起点坐标
ctx.lineTo(200, 100); // 终点坐标
ctx.stroke();        // 描边路径

使用SVG画线

SVG是矢量图形标准，可通过DOM操作动态创建线条元素。

// 创建SVG元素
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('width', '300');
svg.setAttribute('height', '150');

// 创建线条元素
const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
line.setAttribute('x1', '50');
line.setAttribute('y1', '50');
line.setAttribute('x2', '250');
line.setAttribute('y2', '100');
line.setAttribute('stroke', 'blue');
line.setAttribute('stroke-width', '3');

// 添加到DOM
svg.appendChild(line);
document.body.appendChild(svg);

使用CSS画线

通过CSS伪元素或边框属性创建简单线条，适合静态场景。

<style>
  .line {
    position: relative;
    height: 1px;
    background: black;
    width: 200px;
    transform: rotate(30deg);
  }
</style>
<div class="line"></div>

使用WebGL画线

WebGL提供高性能3D/2D渲染能力，适合复杂图形需求。

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

// 顶点着色器
const vsSource = `
  attribute vec2 position;
  void main() {
    gl_Position = vec4(position, 0.0, 1.0);
  }`;

// 片段着色器
const fsSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }`;

// 初始化着色器程序
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
const positions = new Float32Array([-0.5, -0.5, 0.5, 0.5]);

// 创建缓冲区
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

// 绘制线条
gl.drawArrays(gl.LINES, 0, 2);

使用第三方库画线

常见图形库如D3.js、Paper.js等提供更高级的绘图功能。

js实现画线

// 使用Paper.js示例
paper.install(window);
window.onload = function() {
  paper.setup('myCanvas');
  const path = new Path.Line({
    from: [100, 100],
    to: [300, 150],
    strokeColor: 'green',
    strokeWidth: 4
  });
  paper.view.draw();
};