通过canvas实现描点连线功能
先上图
<canvas id="canvas" width="1400" height="800" style="background:white;"><canvas>
var arr = [{ NO: 0, name: "p0", x: 854, y: 96 }, { NO: 1, name: "p1", x: 854, y: 180 }, { NO: 2, name: "p2", x: 704, y: 210 }, { NO: 3, name: "p3", x: 644, y: 260 }, { NO: 4, name: "p4", x: 334, y: 296 }, { NO: 5, name: "p5", x: 204, y: 506 }, { NO: 6, name: "p5", x: 234, y: 516 }, { NO: 7, name: "p5", x: 294, y: 506 }, { NO: 8, name: "p5", x: 394, y: 506 }, { NO: 9, name: "p5", x: 488, y: 506 }, { NO: 10, name: "p5", x: 552, y: 506 }, { NO: 11, name: "p5", x: 676, y: 506 }, { NO: 12, name: "p5", x: 680, y: 606 }, { NO: 13, name: "p5", x: 600, y: 590 }, { NO: 14, name: "p5", x: 608, y: 560 }, { NO: 15, name: "p5", x: 580, y: 570 }, { NO: 16, name: "p5", x: 570, y: 570 }, { NO: 17, name: "p5", x: 560, y: 570 }, { NO: 18, name: "p5", x: 550, y: 570 } ] var context = canvas.getContext('2d') function draw() { context.clearRect(0, 0, canvas.width, canvas.height) context.beginPath() context.moveTo(arr[0].x, arr[0].y) context.stroke() context.beginPath() context.moveTo(arr[0].x, arr[0].y) for (var j = 0; j < arr.length; j++) { context.lineTo(arr[j].x, arr[j].y) } context.stroke() for (var k = 0; k < arr.length; k++) { console.log(arr[k].name) drawDot(arr[k], color16()) } drawDot(control, 'red') } function color16() { //十六进制颜色随机 var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); var color = '#' + r.toString(16) + g.toString(16) + b.toString(16); return color; } function drawDot(pos, color) { context.beginPath() var fillImg = new Image(); fillImg.src = '2.png'; fillImg.onload = function () { context.drawImage(fillImg, pos.x, pos.y, 10, 15); } context.closePath() context.fill() context = canvas.getContext("2d"); context.font = "15px 微软雅黑"; //字体 context.textBaseline = "middle"; //竖直du对齐 context.textAlign = "center"; //水平对zhi齐 context.fillStyle = color; context.fillText(pos.NO, pos.x, pos.y, 15); } function captureMouse(element) { var mouse = { x: 0, y: 0 } element.addEventListener('mousemove', function (event) { var x = event.pageX - element.offsetLeft var y = event.pageY - element.offsetTop mouse.x = x mouse.y = y }) return mouse }