该如何编写函数定义可变长数组做参数来实现canvas的一个页面同时高亮多个div

Question

之前仔细研究了imooc上的文章 http://www.imooc.com/video/4319 ，用手工可以实现了，步骤和思路是：

document.getElementById('Canvas').style.display = "block"; //原来canvas样式只有position为absolute,display为none这两个属性,此时将display改为block,但不加任何fillStyle.     
canvas = document.getElementById('Canvas');
cxt = canvas.getContext("2d");
canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//定义canvas环境
cxt.fillStyle='rgba(0,0,0,0.7)';     
cxt.rect(0, 0, canvas.width, canvas.height); //定义canvas整体宽度和颜色
pathRect(cxt,1496,44,156,35);  //pathRect函数是根据非零环绕原则，定义的是不被涂色的区域(div)，即我的高亮颜色,这个是第一个不涂色区域。 
pathRect(cxt,270,110,250,250); //定义第2个不涂色区域。 
pathRect(cxt,526,110,250,250); //定义第3个不涂色区域。 
pathRect(cxt,789,110,250,250); //定义第4个不涂色区域。
cxt.fill();      //开始染色，其他区域都会被染成灰色，除了定义的几个区域外。

//pathRect函数是根据非零环绕原则，定义的是不被涂色的区域(div)
 function pathRect(cxt, x, y, width, height) {
           cxt.moveTo(x, y);
           cxt.lineTo(x, y + height);
           cxt.lineTo(x + width, y + height);
           cxt.lineTo(x + width, y);
           cxt.lineTo(x, y);
        } 

如果是固定的一个页面好说，但是写为函数就麻烦了。麻烦在2个方面:
1）有些页面有一个元素需要高亮，有些页面有多个，这个不能确定。
2）在每个高亮元素的左边或右边，我需要加一个冒泡提示框，里面写着对这个高亮元素的说明。

以前不用canvas时，写了个highlightdiv函数(见文章尾），定义的参数是(divid, hint_info)，就两个参数.
divid好理解，就是要被高亮的元素区域，函数里会取到他的位置。在遮罩上面描一个同样位置，再在高亮元素的左边或右边，在遮罩层面append一个冒泡提示框(div），这个div的innerhtml就是这个hint_info,这个函数比较好处理。这个函数执行一次，高亮显示一个div,如果一个页面有多个div,就执行多次。
但现在这个，必须一次性要告诉高亮函数，我当前页面需要高亮多少个div, 个数不好确定,估计需要定义一个可变数组，消息框在这里也不知道该如何处理了。

附上之前的函数，
function highlightdiv(div_id, hint_info) {

//起遮罩
$('#overlay').show(); 

//根据div id算出div的位置    
var divobj = $("#" + div_id);    
var Width = document.getElementById(div_id).clientWidth;
var Height = divobj.height();
var x = divobj.offset();
var Top = x.top;
var Left = x.left; 

//在遮罩层上起一个同样大小的div, 但因为亮度不够，被否决，最后得用
var descDiv = document.createElement('div');
document.getElementById("overlay").appendChild(descDiv);
var cssStr = "color: white; z-index:2;position:absolute;left:" + Left + "px; top:" + Top + "px; width:" + Width + "px; height:" + Height + "px;";
descDiv.style.cssText = cssStr; 

//在刚才起的div 起上起一个冒泡div（宽高是固定，只需要定下top,left）, 用做提示信息
var hintinfoDiv = document.createElement('div');
document.getElementById("overlay").appendChild(hintinfoDiv);
var cssStr2 = "background-color: white;z-index:2; position:absolute;left:" + (Left + Width + 15) + "px;top:" + (Top + 0.5 * Height - 15) + "px; width:275px; height:30px;";
hintinfoDiv.style.cssText = cssStr2;
hintinfoDiv.innerHTML = "hint_info"; 
};

任何时候，只要传入div_id,就能很容易算出pathRect(cxt,270,110,250,250)后面的4个值了。

Answer 1

不会canvas。
个数不固定，参数改成数组不就好了

arr = [
  {
    id:'111',
    info: ''
  },
  {
    id:'222',
    info: ''// 不需要提示就不写
  },
  ...
]

function highLight (arr) {
  $('#overlay').show();
  arr.forEach(function (item) {
    id = item.divId
    info = item.info
    // 然后做你原来的操作
  }) 
}