平常canvas可能会用到的公式记录

window坐标转canvas元素坐标

function getMousePosint(canvas, e) {
				var rect = canvas.getBoundingClientRect();
				return {
					x: e.clientX - rect.left * (canvas.width / rect.width),
					y: e.clientY - rect.top * (canvas.height / rect.height)
				}
			}

鼠标点击canvas判断是否是在canvas某一个图形上

/*
@params {point} Object 鼠标的offsetx，offsety
@params {lints} Array canvas用来画多边形的每一个点位数组
**/
function getIsInPolygonr(point, lines) {
  let count = 0;
  let o = lines[0]
  // 第一次循环两个点位都是数组的第一个点位，之后每次循环将新的点位赋值给o
  // 下一次循环就是当前的点位和上一次的点位组成的一条直线进行比对
  // 一直取余数，直到达到数组最大值，余数为0就是最后一个点位和第一个点位组成的直线
  for (let i = 0; i < lines.length; i += 1) {
	d = lines[i % lines.length]
    // 起点和终点位于水平射线的两侧才会有交点
    if ((o.y > point.y) ^ (d.y > point.y)) {

      // x = (y - y0) / k + x0
      const x = (point.y - o.y) * (d.x - o.x) / (d.y - o.y) + o.x;

      if (x > point.x) {
        count += 1;
      }
    }
	o = d
  }
  return count % 2 !== 0;
}

// 计算坐标点位面积
function calcPolygonArea(vertices) {
    var total = 0
    for (var i = 0, l = vertices.length; i < l; i++) {
      var addX = vertices[i].x
      var addY = vertices[i == vertices.length - 1 ? 0 : i + 1].y
      var subX = vertices[i == vertices.length - 1 ? 0 : i + 1].x
      var subY = vertices[i].y
      total += addX * addY * 0.5
      total -= subX * subY * 0.5
    }
    return Math.abs(total)
  }