js实现画线
使用Canvas绘制线条
在JavaScript中，可以通过HTML5的Canvas API实现画线功能。Canvas提供了丰富的绘图方法，适用于绘制直线、曲线等图形。
创建一个Canvas元素并获取其上下文：
<canvas id="myCanvas" width="500" height="500"></canvas>const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');绘制直线的基本步骤：
ctx.beginPath(); // 开始路径
ctx.moveTo(50, 50); // 起点坐标
ctx.lineTo(200, 200); // 终点坐标
ctx.stroke(); // 绘制线条自定义线条样式
可以设置线条的颜色、宽度和端点样式：
ctx.strokeStyle = 'red'; // 线条颜色
ctx.lineWidth = 5; // 线条宽度
ctx.lineCap = 'round'; // 线条端点样式（round/square/butt）绘制虚线
使用setLineDash方法创建虚线：
ctx.setLineDash([5, 3]); // 5像素实线，3像素空白
ctx.stroke();使用SVG绘制线条
SVG是另一种在网页上绘制线条的方法：
<svg width="500" height="500">
<line x1="50" y1="50" x2="200" y2="200"
stroke="blue" stroke-width="3"/>
</svg>动态绘制交互式线条
结合鼠标事件实现交互式绘图：
let isDrawing = false;
let lastX = 0;
let lastY = 0;
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mouseup', () => isDrawing = false);贝塞尔曲线绘制
Canvas还支持绘制贝塞尔曲线：
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.quadraticCurveTo(100, 100, 200, 50); // 二次贝塞尔曲线
ctx.stroke();对于更复杂的曲线可以使用三次贝塞尔曲线：
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.bezierCurveTo(100, 100, 150, 0, 200, 50); // 三次贝塞尔曲线
ctx.stroke();性能优化建议
当需要绘制大量线条时，可以考虑以下优化：
- 使用requestAnimationFrame进行动画绘制
- 对于静态图形，考虑使用离屏Canvas
- 合理使用路径的beginPath和closePath方法
- 避免在动画循环中频繁设置样式属性
