Molunerfinn/markline.js

<link rel="stylesheet" type="text/css" href="markline.css">
<script type="text/javascript" src="markline.min.js"></script>
...
<canvas id="canvas" width="1366" height="768"></canvas> 
<img id="bg" src="bg.jpg"></img>

var data = [{
  from: { x: 300, y: 50 },
  to: { x: 50, y: 300 },
  style: '#fff',
  info: ['Hi,this is markline!']
},{
  ...
}]

var mkLine = markline('canvas','bg',1366,768);
mkLine.setOption(data);
mkLine.paint();

var mkLine = markline('canvas','bgId',1366,768);

mkLine.setOption([{
  from: { x: 300, y: 50 },
  to: { x: 50, y: 300 },
  style: '#fff',
  info: ['Hi,this is markline!']
},{
  from: { x: 100, y: 100 },
  to: { x: 50, y: 300 },
  style: '#000',
  info: ['Hi,this is another markline!']
}])

mkLine.paint()

mkLine.paintPoint([{
  x: 300,
  y: 50,
  style: '#fff',
  info: ['Hi,this is markline!']
},{
  x: 200,
  y: 100,
  style: '#000',
  info: ['Hi,this is another markline!']
}])

var lines = mkLine.getLines();

lines[0].style = 'red'; //修改第一条标记线的颜色为红色

var line = mkLine.getLine(0);

line.style = 'red'; //修改第一条标记线的颜色为红色

var balls = mkLine.getBalls();

balls[0].style = 'red'; //修改第一条标记线的运动点的颜色为红色

var ball = mkLine.getBall(0);

ball.style = 'red'; //修改第一条标记线的运动点的颜色为红色

var points = mkLine.getPoints();

points[0].style = '#fff'; //修改第一个标记点的颜色为白色

var point = mkLine.getPoint(0);

point.style = '#fff'; //修改第一个标记点的颜色为白色

{
  hover: false,
  type: "",
  id: null
}

var isHover = mkLine.getHover()
console.log(isHover);

mkLine.onClick(function(){
  var e = window.event;
  var canvas = document.getElementById("canvas");
  var mouse = {
    x : e.clientX - canvas.getBoundingClientRect().left,
    y : e.clientY - canvas.getBoundingClientRect().top
  };

  var isHover = mkLine.getHover();
  console.log(isHover);
});

mkLine.onContextmenu(function(){
  var e = window.event;
  var canvas = document.getElementById("canvas");
  var mouse = {
    x : e.clientX - canvas.getBoundingClientRect().left,
    y : e.clientY - canvas.getBoundingClientRect().top
  };

  var isHover = mkLine.getHover();
  console.log(isHover);
});