js 实现画线
使用 Canvas API 画线
Canvas API 是 HTML5 提供的绘图工具，通过 JavaScript 可以直接在画布上绘制线条。
// 获取 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, 200); // 终点坐标
ctx.stroke(); // 绘制线条使用 SVG 画线
SVG 是一种矢量图形格式，可以通过 HTML 嵌入或动态创建 SVG 元素来画线。
// 创建 SVG 元素
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "300");
svg.setAttribute("height", "300");
document.body.appendChild(svg);
// 创建线条元素
const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
line.setAttribute("x1", "50");
line.setAttribute("y1", "50");
line.setAttribute("x2", "200");
line.setAttribute("y2", "200");
line.setAttribute("stroke", "blue");
line.setAttribute("stroke-width", "5");
svg.appendChild(line);使用 CSS 和 DOM 画线
通过动态创建 DIV 元素并应用 CSS 样式来模拟线条。
// 创建线条元素
const line = document.createElement('div');
line.style.position = 'absolute';
line.style.left = '50px';
line.style.top = '50px';
line.style.width = '150px'; // 线条长度
line.style.height = '5px'; // 线条宽度
line.style.backgroundColor = 'green';
line.style.transformOrigin = '0 0';
line.style.transform = 'rotate(45deg)'; // 线条角度
document.body.appendChild(line);使用第三方库（如 p5.js）
p5.js 是一个简化图形绘制的 JavaScript 库，适合快速实现绘图功能。
// 引入 p5.js 后使用
function setup() {
createCanvas(300, 300);
}
function draw() {
background(220);
stroke('purple');
strokeWeight(5);
line(50, 50, 200, 200);
}注意事项
- Canvas：适合动态绘图和复杂图形，但需要手动管理绘制逻辑。
- SVG：适合矢量图形和交互式图形，DOM 操作更灵活。
- CSS/DOM：简单但性能较差，不适合复杂图形。
- 库支持：第三方库可以简化代码，但会增加依赖。
根据需求选择合适的方法，Canvas 和 SVG 是更专业的选择。
