要找到一行的长度，请使用毕达哥拉斯

例如，两个点A，B之间的距离

function distanceBetween(A,B) {
    return ((B.x - A.x) ** 2 + (B.y - A.y) ** 2) ** 0.5;
}

或

function distanceBetween(A,B) {
    const dx = B.x - A.x; 
    const dy = B.y - A.y; 
    return Math.sqrt(dx * dx + dy * dy);
}

或

function distanceBetween(A,B) {
    return Math.hypot(B.x - A.x,B.y - A.y);
}

要测量绘制的路径，您需要累加每个子路径（线）的长度以获得总计。

示例

该示例在绘制时会累积长度。当发生鼠标按下事件时，累计长度将清零。

const canvas = document.querySelector('#paint');
const ctx = canvas.getContext('2d');

const sketch = document.querySelector('#sketch');
const sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
var pathLength = 0;
var distance = 0;

const mouse = {x: 0,y: 0};
const last_mouse = {x: 0,y: 0};
const initialPoint  = {x: 0,y: 0};

function distanceBetween(A,B) {
    const dx = B.x - A.x; 
    const dy = B.y - A.y; 
    return (dx * dx + dy * dy) ** 0.5;
}


/* Drawing on Paint App */
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
canvas.addEventListener('mousedown',function(e) {
  initialPoint.x = mouse.x = e.pageX - this.offsetLeft;
  initialPoint.y = mouse.y = e.pageY - this.offsetTop;
  pathLength = 0;
  canvas.addEventListener('mousemove',onPaint);
},false);

canvas.addEventListener('mouseup',function() {
  drawStraightLine()
  canvas.removeEventListener('mousemove',false);

function displayLengths() {
    StraightLineDistance.textContent = "Distance: " + distance.toFixed(0) + "px";
    CurvedLineDistance.textContent = "Traveled: " + pathLength.toFixed(0) + "px";

}

function onPaint(e) {
  last_mouse.x = mouse.x;
  last_mouse.y = mouse.y;

  mouse.x = e.pageX - this.offsetLeft;
  mouse.y = e.pageY - this.offsetTop;

  ctx.strokeStyle = "#000000";
  ctx.beginPath();
  ctx.lineTo(last_mouse.x,last_mouse.y);
  ctx.lineTo(mouse.x,mouse.y);
  ctx.stroke();

  pathLength += distanceBetween(last_mouse,mouse);
  distance = distanceBetween(initialPoint,mouse);
  displayLengths();
};


function drawStraightLine() {
  ctx.strokeStyle = "#FF000077";
  ctx.beginPath();
  ctx.lineTo(initialPoint.x,initialPoint.y);
  ctx.lineTo(mouse.x,mouse.y);
  ctx.stroke();

  distance = distanceBetween(initialPoint,mouse);
  displayLengths();
}

html,body {
  width: 80%;
  height: 50%;
}

#sketch {
  border: 10px solid gray;
  height: 100%;
}

<div id="sketch">
  <canvas id="paint"></canvas>
  <script src="1.js"></script>
</div>
<label id="StraightLineDistance"></label>
<label id="CurvedLineDistance"></label>

JavaScript文件

const canvas = document.querySelector('#paint');
const ctx = canvas.getContext('2d');

const sketch = document.querySelector('#sketch');
const sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
var pathLength = 0;
var distance = 0;

const mouse = {x: 0,B) {
const dx = B.x - A.x; 
const dy = B.y - A.y; 
return (dx * dx + dy * dy) ** 0.5;
}


/* Drawing on Paint App */
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
canvas.addEventListener('mousedown',function(e) {
initialPoint.x = mouse.x = e.pageX - this.offsetLeft;
initialPoint.y = mouse.y = e.pageY - this.offsetTop;
pathLength = 0;
canvas.addEventListener('mousemove',function() {
drawStraightLine()
canvas.removeEventListener('mousemove',false);

function displayLengths() {
StraightLineDistance.textContent = "Distance: " + distance.toFixed(0) + "px";
CurvedLineDistance.textContent = "Traveled: " + pathLength.toFixed(0) + "px";

} 

function onPaint(e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;

mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;

ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.lineTo(last_mouse.x,last_mouse.y);
ctx.lineTo(mouse.x,mouse.y);
ctx.stroke();

pathLength += distanceBetween(last_mouse,mouse);
distance = distanceBetween(initialPoint,mouse);
displayLengths();
};


function drawStraightLine() {
ctx.strokeStyle = "#FF000077";
ctx.beginPath();
ctx.lineTo(initialPoint.x,initialPoint.y);
ctx.lineTo(mouse.x,mouse.y);
ctx.stroke();

distance = distanceBetween(initialPoint,mouse);
displayLengths();  
}

HTML文件          

<link rel="stylesheet" href="1.css"/>
</head>

<body>
<div id="sketch">
<canvas id="paint"></canvas>
<script src="1.js"></script>
</div>
<label id="StraightLineDistance"></label><br/>
<label id="CurvedLineDistance"></label><br/>
<label id="Index"></label>
</body>
</html>

我的新疑问是如何在标签id =“ Index”中显示（distance / pathLength）的比率的实时值

我尝试使用Index.textContent =（distance / pathLength）.toFixed（0）;但是在输出中显示1及其常数。 如果我对此有所帮助，我将很高兴