var canvasWidth = 800;
var canvasHeight = canvasWidth;
var isMouseDown = false;
var lastloc = {x: 0, y: 0};//上一次鼠标的位置
var lastTimestamp = 0;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = canvasWidth;
canvas.height = canvasHeight;

drawGrid();
canvas.onmousedown = function (e) {
   e.preventDefault();
   isMouseDown = true;
   lastloc = windowToCanvas(e.clientX, e.clientY);
   lastTimestamp = new Date().getTime();//当前时间戳
}
canvas.onmouseup = function (e) {
   e.preventDefault();
   isMouseDown = false;
   console.log("up");
}
canvas.onmouseout = function (e) {
   e.preventDefault();
   isMouseDown = false;
   console.log("out");
}
canvas.onmousemove = function (e) {
   e.preventDefault();
   if (isMouseDown) {
       var curloc = windowToCanvas(e.clientX, e.clientY);
       var curTimestamp = new Date().getTime();
       var s = calcDistance(curloc, lastloc);
       var t = curTimestamp - lastTimestamp;
       var lineWidth = calcLineWidth(t, s);
       console.log(lineWidth);
       //write
       context.beginPath();
       context.moveTo(lastloc.x, lastloc.y);
       context.lineTo(curloc.x, curloc.y);
       context.strokeStyle = "black";
       context.lineWidth = lineWidth;
       context.lineCap = "round";
       context.lineJoin = "round";
       context.stroke();
       lastloc = curloc;
       lastTimestamp = curTimestamp;
   }
}
function windowToCanvas(x, y) {
   var bbox = canvas.getBoundingClientRect();
   return {x: Math.round(x - bbox.left), y: Math.round(y - bbox.top)}
}
function calcDistance(loc1, loc2) {
   return Math.sqrt((loc1.x - loc2.x) * (loc1.x - loc2) + (loc1.x + loc2.x) * (loc1.x + loc2))
}
function calcLineWidth(t, s) {
   var v = s / t;
   var resultLineWidth;
   if (v<=0.1) {
       resultLineWidth = 30;
   } else if (v>=10) {
       resultLineWidth = 1;
   } else {
       resultLineWidth = 30 - (v - 0.1) / (10 - 0.1) * (30 - 1);
   }
   return resultLineWidth;
}
function drawGrid() {
   context.save();
   context.strokeStyle = "rgb(230,11,9)";
   context.beginPath();
   context.moveTo(3, 3);
   context.lineTo(canvasWidth - 3, 3);
   context.lineTo(canvasWidth - 3, canvasHeight - 3);
   context.lineTo(3, canvasHeight - 3);
   context.closePath();
   context.lineWidth = 6;
   context.stroke();

   context.beginPath();
   context.moveTo(0, 0);
   context.lineTo(canvasWidth, canvasHeight);
   context.moveTo(canvasWidth, 0);
   context.lineTo(0, canvasHeight);
   context.moveTo(canvasWidth / 2, 0);
   context.lineTo(canvasWidth / 2, canvasHeight);
   context.moveTo(0, canvasHeight / 2);
   context.lineTo(canvasWidth, canvasHeight / 2);
   context.closePath();
   context.lineWidth = 1;
   context.stroke();
   context.restore();
}