該如何編寫函數(shù)定義可變長(zhǎng)數(shù)組做參數(shù)來(lái)實(shí)現(xiàn)canvas的一個(gè)頁(yè)面同時(shí)高亮多個(gè)div

之前仔細(xì)研究了imooc上的文章 http://www.imooc.com/video/4319 ，用手工可以實(shí)現(xiàn)了，步驟和思路是：

document.getElementById('Canvas').style.display = "block"; //原來(lái)canvas樣式只有position為absolute,display為none這兩個(gè)屬性,此時(shí)將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環(huán)境
cxt.fillStyle='rgba(0,0,0,0.7)';     
cxt.rect(0, 0, canvas.width, canvas.height); //定義canvas整體寬度和顏色
pathRect(cxt,1496,44,156,35);  //pathRect函數(shù)是根據(jù)非零環(huán)繞原則，定義的是不被涂色的區(qū)域(div)，即我的高亮顏色,這個(gè)是第一個(gè)不涂色區(qū)域。 
pathRect(cxt,270,110,250,250); //定義第2個(gè)不涂色區(qū)域。 
pathRect(cxt,526,110,250,250); //定義第3個(gè)不涂色區(qū)域。 
pathRect(cxt,789,110,250,250); //定義第4個(gè)不涂色區(qū)域。
cxt.fill();      //開(kāi)始染色，其他區(qū)域都會(huì)被染成灰色，除了定義的幾個(gè)區(qū)域外。

//pathRect函數(shù)是根據(jù)非零環(huán)繞原則，定義的是不被涂色的區(qū)域(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);
        } 

如果是固定的一個(gè)頁(yè)面好說(shuō)，但是寫為函數(shù)就麻煩了。麻煩在2個(gè)方面:
1）有些頁(yè)面有一個(gè)元素需要高亮，有些頁(yè)面有多個(gè)，這個(gè)不能確定。
2）在每個(gè)高亮元素的左邊或右邊，我需要加一個(gè)冒泡提示框，里面寫著對(duì)這個(gè)高亮元素的說(shuō)明。

以前不用canvas時(shí)，寫了個(gè)highlightdiv函數(shù)(見(jiàn)文章尾），定義的參數(shù)是(divid, hint_info)，就兩個(gè)參數(shù).
divid好理解，就是要被高亮的元素區(qū)域，函數(shù)里會(huì)取到他的位置。在遮罩上面描一個(gè)同樣位置，再在高亮元素的左邊或右邊，在遮罩層面append一個(gè)冒泡提示框(div），這個(gè)div的innerhtml就是這個(gè)hint_info,這個(gè)函數(shù)比較好處理。這個(gè)函數(shù)執(zhí)行一次，高亮顯示一個(gè)div,如果一個(gè)頁(yè)面有多個(gè)div,就執(zhí)行多次。
但現(xiàn)在這個(gè)，必須一次性要告訴高亮函數(shù)，我當(dāng)前頁(yè)面需要高亮多少個(gè)div, 個(gè)數(shù)不好確定,估計(jì)需要定義一個(gè)可變數(shù)組，消息框在這里也不知道該如何處理了。

附上之前的函數(shù)，
function highlightdiv(div_id, hint_info) {

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

//根據(jù)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; 

//在遮罩層上起一個(gè)同樣大小的div, 但因?yàn)榱炼炔粔?，被否決，最后得用
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 起上起一個(gè)冒泡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"; 
};

任何時(shí)候，只要傳入div_id,就能很容易算出pathRect(cxt,270,110,250,250)后面的4個(gè)值了。