<canvas id="canvas" width="400" height="400" style="background: #ccc;"></canvas>
var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");

var x0 = 100,
    y0 = 200,
    x2 = 300,
    y2 = 200;

canvas.addEventListener("mousemove", function(e) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var x1 = getMouse(e).x * 2 - (x0 + x2) / 2;
  y1 = getMouse(e).y * 2 - (y0 + y2) / 2;
  context.beginPath();
  context.moveTo(x0, y0);
  context.quadraticCurveTo(x1, y1, x2, y2);
  context.stroke();
}, false);

// 获取鼠标的当前位置
function getMouse(event) {
  var event = event || window.event;
  var mouse = {};
  var x, y;
  if(event.pageX || event.pageY) {
    x = event.pageX;
    y = event.pageY;
  } else if(event.clientX || event.clientY) {
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    x = event.clientX + scrollLeft;
    y = event.clientY + scrollTop;
  }
  mouse.x = x;
  mouse.y = y;
  return mouse;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.