var render = function(){
??????????? var html='';
??????????? var padding=2;
?????????? ?
??????????? var winWidth=zWin.width();
??????????? var picWidth=(winWidth-padding*3)/4;
??????????? for(var i = 1;i<=total;i++){
?????????? ??? ?var imgSrc='img/'+i+'.jpg';
?????????? ??? ?var p= i%4 == 1? 0:padding;
?????????? ??? ?html+='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-top:2px;padding-left:'+p+'px"><canvas???????? id="cvs_'+i+'"></canvas></li>'

?????????? ??? ?var imageObj = new Image();
?????????? ??? ?imageObj.index=i;
?????????? ??? ?imageObj.onload = function(){
?????????? ??? ??? ?var cvs = $('#cvs_'+this.index)[0].getContext('2d');
?????????? ??? ??? ?//經過$包裝后成為一個zepto對象，后面加【0】轉換dom對象
?????????? ??? ??? ?//getContext('2d')繪圖環境
?????????? ??? ??? ?cvs.width=this.width;
?????????? ??? ??? ?cvs.height = this.height;
?????????? ??? ??? ?cvs.drawImage(this,0,0);
?????????? ??? ?}
?????????? ??? ?imageObj.src = imgSrc;
??????????? }

??????????? $('#container').html(html);
?? ??? ?}
?? ??? ?render();

代碼中突出的部分可以看出，在 for 循環中 canvas作為html變量中的字符串存在 ，并未渲染成DOM（循環結束后才通過$('#container').html(html);寫入dom），此時為什么可以通過?var cvs = $('#cvs_'+this.index)[0].getContext('2d');獲取到該節點？