js + css 在两点之间绘制直线

draw line between two points in pure css

css, line

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 858
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function lineDistance(x, y, x0, y0){
    return Math.sqrt((x -= x0) * x + (y -= y0) * y);
};

// Points to detect changes
var lastA = {"top":0,"left":0};
var lastB = {"top":0,"left":0};

function drawLine(a, b, line) {
  var pointA = $(a).offset();
  var pointB = $(b).offset();
  
  // Draw the line once per change so it doesn't blink with some values + it saves computing power
  if (pointA.top != lastA.top || pointB.top != lastB.top 
      || pointA.left != lastA.left || pointB.left != lastB.left) {
    // Maths
    var pointAcenterX = $(a).width() / 2;
    var pointAcenterY = $(a).height() / 2;
    var pointBcenterX = $(b).width() / 2;
    var pointBcenterY = $(b).height() / 2;
    var angle = Math.atan2(pointB.top - pointA.top, pointB.left - pointA.left) * 180 / Math.PI;
    var distance = lineDistance(pointA.left, pointA.top, pointB.left, pointB.top);

// Set Angle
    $(line).css('transform', 'rotate(' + angle + 'deg)');

// Set Width
    $(line).css('width', distance + 'px');

// Position
    var offsetTop = (pointB.top < pointA.top)?pointB.top + pointBcenterY:pointA.top + pointAcenterY;
    var offsetLeft = (pointB.left < pointA.left)?pointB.left + pointBcenterX:pointA.left + pointAcenterX;
    $(line).offset({top: offsetTop, left: offsetLeft});
  }
}
setInterval(function() {
  drawLine('.a', '.b', '.line');
});

编译

CSS

HTML

draw line between two points in pure css

css, line

编辑器支持Emmet

快捷键

draw line between two points in pure css

css, line

使用h5 canvas绘制变宽渐变色线条

使用canvas在文本段落字里行间插入自适应曲线图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：