绘制直线是网页CAD中比较基础的功能之一,下面是一个实现该功能的示例代码: HTML部分: - <canvas id="myCanvas" width="800" height="600"></canvas>
复制代码
JS部分: - 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控件的云图功能,如果需要实现连续绘制多条直线的功能,可以通过修改代码来实现,例如在鼠标松开事件中将终点坐标作为下一条直线的起点坐标等。
|