网页CAD中如何利用Javascript开发绘制直线的功能 - UG爱好者

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 定义变量记录起点和终点坐标
var startX = 0;
var startY = 0;
var endX = 0;
var endY = 0;
// 监听鼠标按下事件
canvas.addEventListener('mousedown', function(e) {
var rect = canvas.getBoundingClientRect();
startX = e.clientX - rect.left;
startY = e.clientY - rect.top;
});
// 监听鼠标松开事件
canvas.addEventListener('mouseup', function(e) {
var rect = canvas.getBoundingClientRect();
endX = e.clientX - rect.left;
endY = e.clientY - rect.top;
// 绘制直线
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.stroke();
});

复制代码

上述代码中，我们首先获取到canvas元素及其context对象，然后在页面中定义了一个变量来记录绘制直线的起点和终点坐标。在鼠标按下和松开事件中，我们获取到鼠标点击位置的坐标，并将其作为起点和终点坐标进行绘制。在线CAD的开发中，具体绘制操作使用了beginPath()、moveTo()、lineTo()和stroke()等API函数来完成。

需要注意的是，上述代码示例只实现了一次绘制一条直线的功能。更多的功能可以参考梦想CAD控件的云图功能，如果需要实现连续绘制多条直线的功能，可以通过修改代码来实现，例如在鼠标松开事件中将终点坐标作为下一条直线的起点坐标等。