一、线段绘制基础方法

在p5.js中，线段绘制主要通过line()函数实现，该函数接收四个参数：起点x坐标、起点y坐标、终点x坐标、终点y坐标。例如绘制一条从(50,50)到(200,50)的水平线段：

function setup() {
  createCanvas(400, 300);
  background(240);
  line(50, 50, 200, 50); // 绘制水平线段
}

1.1 坐标系统解析

p5.js采用笛卡尔坐标系，原点(0,0)位于画布左上角。x轴向右为正方向，y轴向下为正方向。理解坐标系统对精准定位线段至关重要：

绝对坐标：直接指定像素位置

相对坐标：结合width和height变量实现自适应布局

function setup() {
createCanvas(400, 300);
let centerX = width/2;
let centerY = height/2;
line(centerX-100, centerY, centerX+100, centerY); // 居中水平线
}

1.2 基础样式控制

通过stroke()函数设置线段颜色，strokeWeight()控制线宽：

function setup() {
  createCanvas(400, 300);
  background(240);
  // 三条不同样式的水平线
  stroke('red');
  strokeWeight(5);
  line(50, 50, 350, 50);
  stroke('blue');
  strokeWeight(2);
  line(50, 100, 350, 100);
  stroke('green');
  strokeWeight(1);
  line(50, 150, 350, 150);
}

二、进阶样式控制技术

2.1 透明度与混合模式

通过fill()的alpha通道或stroke()的RGBA值实现透明效果：

function setup() {
  createCanvas(400, 300);
  background(240);
  // 半透明红色粗线
  stroke('rgba(255,0,0,0.5)');
  strokeWeight(8);
  line(50, 50, 350, 50);
  // 叠加模式示例
  blendMode(MULTIPLY);
  stroke('blue');
  strokeWeight(4);
  line(50, 100, 350, 100);
}

2.2 线段端点样式

使用strokeCap()控制线段端点形状：

ROUND：圆形端点
SQUARE：方形端点（默认）

PROJECT：方形端点但延伸半个线宽

function setup() {
createCanvas(400, 200);
stroke('black');
strokeWeight(20);
strokeCap(ROUND);
line(50, 50, 150, 50);
strokeCap(SQUARE);
line(200, 50, 300, 50);
strokeCap(PROJECT);
line(350, 50, 450, 50); // 注意超出画布部分
}

三、动态线段绘制技术

3.1 鼠标交互绘制

结合鼠标事件实现交互式绘图：

let lastX, lastY;
function setup() {
  createCanvas(600, 400);
  background(240);
  strokeWeight(3);
}
function mousePressed() {
  lastX = mouseX;
  lastY = mouseY;
}
function mouseDragged() {
  stroke(random(255), random(255), random(255));
  line(lastX, lastY, mouseX, mouseY);
  lastX = mouseX;
  lastY = mouseY;
}

3.2 动画线段效果

使用frameCount和三角函数创建动态效果：

function setup() {
  createCanvas(600, 400);
  angleMode(DEGREES);
}
function draw() {
  background(240);
  let centerX = width/2;
  let centerY = height/2;
  let radius = 150;
  for(let i=0; i<360; i+=30){
    let angle = i + frameCount;
    let x1 = centerX + radius * cos(angle);
    let y1 = centerY + radius * sin(angle);
    let x2 = centerX + radius * cos(angle+30);
    let y2 = centerY + radius * sin(angle+30);
    stroke(map(i,0,360,0,255), 100, 200);
    strokeWeight(map(sin(frameCount+i),-1,1,1,5));
    line(x1, y1, x2, y2);
  }
}

四、性能优化技巧

4.1 批量绘制策略

对于大量线段，使用beginShape()和vertex()组合更高效：

function setup() {
  createCanvas(600, 400);
  let points = [];
  // 生成1000个随机点
  for(let i=0; i<1000; i++){
    points.push({
      x: random(width),
      y: random(height)
    });
  }
  background(240);
  noFill();
  strokeWeight(1);
  // 传统方式（较慢）
  /*
  for(let i=0; i<points.length-1; i++){
    line(points[i].x, points[i].y, 
         points[i+1].x, points[i+1].y);
  }
  */
  // 批量绘制方式（更快）
  beginShape();
  for(let i=0; i<points.length-1; i++){
    vertex(points[i].x, points[i].y);
  }
  endShape(LINES); // 注意LINES模式需要成对顶点
}

4.2 离屏渲染技术

对于复杂静态图形，使用离屏canvas提升性能：

let offscreenBuffer;
function setup() {
  createCanvas(600, 400);
  // 创建离屏缓冲区
  offscreenBuffer = createGraphics(600, 400);
  drawComplexPattern(offscreenBuffer);
  // 只需绘制一次
  image(offscreenBuffer, 0, 0);
}
function drawComplexPattern(g) {
  g.background(240);
  g.strokeWeight(2);
  for(let y=0; y<g.height; y+=10){
    for(let x=0; x<g.width; x+=10){
      let d = dist(x, y, g.width/2, g.height/2);
      let alpha = map(d, 0, 300, 255, 0);
      g.stroke(`rgba(0,0,0,${alpha/255})`);
      g.line(x, y, g.width-x, g.height-y);
    }
  }
}

五、实际应用案例

5.1 数据可视化实现

使用线段连接数据点创建折线图：

let data = [120, 150, 180, 90, 210, 140, 170];
function setup() {
  createCanvas(600, 400);
  let margin = 50;
  let chartWidth = width - 2*margin;
  let chartHeight = height - 2*margin;
  background(240);
  noFill();
  stroke('steelblue');
  strokeWeight(3);
  beginShape();
  for(let i=0; i<data.length; i++){
    let x = margin + i * (chartWidth/(data.length-1));
    let y = height - margin - (data[i]/250)*chartHeight;
    vertex(x, y);
  }
  endShape();
  // 添加坐标轴
  stroke('black');
  strokeWeight(1);
  line(margin, height-margin, margin, margin);
  line(margin, height-margin, width-margin, height-margin);
}

5.2 游戏开发应用

在平台游戏中创建碰撞边界：

let platform = {
  x: 100,
  y: 300,
  width: 200,
  height: 20
};
function setup() {
  createCanvas(600, 400);
}
function draw() {
  background(240);
  // 绘制平台
  fill(100);
  rect(platform.x, platform.y, platform.width, platform.height);
  // 绘制碰撞边界（线段）
  noFill();
  stroke('red');
  strokeWeight(3);
  // 上边界
  line(platform.x, platform.y, 
       platform.x+platform.width, platform.y);
  // 左边界
  line(platform.x, platform.y, 
       platform.x, platform.y+platform.height);
  // 右边界
  line(platform.x+platform.width, platform.y, 
       platform.x+platform.width, platform.y+platform.height);
}

通过系统学习本文内容，开发者可以全面掌握p5.js线段绘制的各种技术，从基础样式控制到动态效果实现，再到性能优化策略。这些技术可广泛应用于数据可视化、游戏开发、交互艺术等多个领域，帮助开发者创建出更具表现力和性能的图形应用。

p5.js 线段绘制全解析：从基础到进阶