js使用canvas画多边形，根据一个区域数组上色

js使用canvs绘制多边形，或者根据后端给的二维数组，绘制一个区域，给区域上色

• index.html

<canvas id="myCanvas" width="285" height="401"></canvas>

• index.js

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 给定一个二维数组为x,y坐标
let res_data = [[10,10], [30, 102], [90, 190], [162, 110], [88, 13], ]
var poly = flatten(res_data);

// 二维数组转化为一维数组
function flatten(arr) {
  return [].concat(...arr.map(x =>
    Array.isArray(x) ? flatten(x) : x
  ))
}
// 设置填充颜色
context.fillStyle = "#ff3e2968";
// 绘制多边形
polygon(poly, context);
// 绘制多边形遮罩层
function polygon(poly, context) {
  context.beginPath();
  context.moveTo(poly[0], poly[1]);
  for (var i = 2; i < poly.length; i += 2) {
    context.lineTo(poly[i], poly[i + 1]);
    console.log(poly[i], poly[i + 1]);
  }
  context.closePath();
  context.fill();
  context.stroke();
  context.closePath()
}

• 效果图