在按钮单击上绘制多行JavaScript-不使用画布

我想知道是否有可能像这个项目一样获得多条绘制线-

但是，如果不使用

画布

，而是使用带有css背景图像的普通div框

下面是使用画布的代码

var canvas = new fabric.Canvas('c', { selection: false });

var line, isDown;

canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
  line = new fabric.Line(points, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
    originX: 'center',
    originY: 'center'
  });
  canvas.add(line);
});

canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  line.set({ x2: pointer.x, y2: pointer.y });
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});

---

谢谢

我对示例进行了一些更正，以全方位绘制，这仅适用于css3：

请注意，必须定义到点（单击两次）才能绘制直线

请参阅下面的代码片段：

$（函数（）{
var x1=null，
y1=零；
var offsetX=0，
offsetY=0；
函数createLine（x1，y1，x2，y2）{
变量长度=数学sqrt（（（x1-x2）*（x1-x2））+（（y1-y2）*（y1-y2））；
变量角度=数学atan2（y2-y1，x2-x1）*180/数学PI；
变量变换='旋转（'+角度+'度）'；
偏移量x=（x1>x2）？x2:x1；
偏移量=（y1>y2）？y2:y1；
变量行=$（''）
.appendTo（“#demo”）
.addClass（'行'）
.css({
'位置'：'绝对'，
“-webkit转换”：转换，
“-moz变换”：变换，
“变换”：变换
})
.宽度（长度）
.抵消({
左：offsetX，
顶部：越位
});
回流线；
}
$（“#演示”）。单击（函数（事件）{
var x=event.pageX，
y=event.pageY；
如果（x1==null）{
x1=x；
y1=y；
}否则{
创建线（x1，y1，x，y）；
x1=y1=null；
}
})
.delegate（'.line'，click'，函数（事件）{
event.preventDefault（）；
$（this.toggleClass（'active'）；
x1=y1=null；
返回false；
});
});
div.line{
变换原点：0.100%；
高度：3倍；
/*线宽为3*/
背景：#000；
/*黑色填料*/
}
#演示{
边框：1px虚线#ccc；
高度：400px；
}
拐角处的分区{
变换原点：0%0%；
}

单击两点以绘制一条线：
是的，这是可能的。你试过什么了？这就是你要找的吗@OmarGreat谢谢你，我一直在到处找这个，但什么都找不到。所以你一直是个救生员：）