/doc/cvi_busy_lib.js
JavaScript | 288 lines | 249 code | 1 blank | 38 comment | 56 complexity | 35d2952bc37236a4ff339c1a1b9e7f7b MD5 | raw file
1/** 2 * cvi_busy_lib.js 1.0 (06-Apr-2008) 3 * (c) by Christian Effenberger 4 * All Rights Reserved 5 * Source: busy.netzgesta.de 6 * Distributed under Netzgestade Software License Agreement 7 * http://www.netzgesta.de/cvi/LICENSE.txt 8 * License permits free of charge 9 * use on non-commercial and 10 * private web sites only 11 * syntax: 12 13 Add: 14 OBJECT = getBusyOverlay(parent[,overlay[,busy]]); 15 16 parent == element to add the overlay (e.g. document.getElementById(id)) 17 18 overlay == OBJECT e.g. {color: 'black', opacity: 0.5, ...} 19 color == STR 'black' or '#000000' or 'rgb(0,0,0)' Default: 'white' 20 opacity == FLOAT 0.0 - 1.0 Default: 0.0 21 text == STR e.g. "loading" Default: '' 22 style == STR e.g. "color: black;" or "my_text_class" Default: '' 23 24 busy == OBJECT e.g. {color: '#fff', size: 48, ...} 25 color == STR '#000000' - '#ffffff' or '#000' - '#fff' Default: '#000' 26 size == INT 16 - 512 (pixel) Default: 32 27 type == STR 'circle|oval|polygon|rectangle|tube' or 'c|o|p|r|t' Default: 'tube' 28 iradius == INT 6 - 254 (pixel) Default: 8 29 weight == INT 1 - 254 (pixel) Default: 3 30 count == INT 5 - 36 (rays) Default: 12 31 speed == INT 30 - 1000 (millisec) Default: 96 32 minopac == FLOAT 0.0 - 0.5 Default: 0.25 33 34 Remove: 35 OBJECT.remove(); 36 37 * 38**/ 39 40function onIEWinResize(event) { 41 function parseWidth(val) {return (isNaN(parseInt(val,10))?0:parseInt(val,10));} 42 if(!event) {event=window.event;} var i,cs,parent=this, div=parent.getElementsByTagName("div"); 43 if(div.length>0) { 44 if(parent.currentStyle){cs=parent.currentStyle;}else if(document.defaultView&&document.defaultView.getComputedStyle){cs=document.defaultView.getComputedStyle(parent,"");}else{cs=parent.style;} 45 for(i=0; i<div.length; i++) { 46 if(div[i].className=='buzy_ele') { 47 div[i].style.height=(parent.offsetHeight-parseWidth(cs.borderBottomWidth)-parseWidth(cs.borderTopWidth)); 48 div[i].style.width=(parent.offsetWidth-parseWidth(cs.borderLeftWidth)-parseWidth(cs.borderRightWidth)); 49 div[i].firstChild.style.height=div[i].style.height; div[i].firstChild.style.width=div[i].style.width; 50 break; 51 } 52 } 53 } 54} 55function getBusyOverlay(parent,overlay,busy) { 56 if(typeof(parent)==='object' && document.getElementsByTagName) { 57 function parseWidth(val) {return (isNaN(parseInt(val,10))?0:parseInt(val,10));} 58 var isIE,isVL,isCV,isWK,isGE,i,b,o,lt,rt,lb,rb,cz,cs,size,inner,outer,string,canvas,context,ctrl,opacity,color,text,styles,waiting=true; 59 if(parent.currentStyle){cs=parent.currentStyle;}else if(document.defaultView&&document.defaultView.getComputedStyle){cs=document.defaultView.getComputedStyle(parent,"");}else{cs=parent.style;} 60 while(cs.display.search(/block|inline-block|table|inline-table|list-item/i)<0) {parent=parent.parentNode; if(parent.currentStyle){cs=parent.currentStyle;}else if(document.defaultView&&document.defaultView.getComputedStyle){cs=document.defaultView.getComputedStyle(parent,"");}else{cs=parent.style;} if(parent.tagName.toUpperCase()==='BODY') {parent="";}} 61 if(typeof(parent)==='object') { 62 if(!overlay) {overlay=new Object(); overlay['opacity']=0;} if(!busy) {busy=new Object(); busy['size']=32;} 63 opacity=Math.max(0.0,Math.min(1.0,(typeof overlay['opacity']==='number'?overlay['opacity']:0)||0)); color=(typeof overlay['color']==='string'?overlay['color']:'white'); 64 text=(typeof overlay['text']==='string'?overlay['text']:''); styles=(typeof overlay['style']==='string'?overlay['style']:''); 65 canvas=document.createElement("canvas"); isCV=canvas.getContext?1:0; 66 isWK=navigator.userAgent.indexOf('WebKit')>-1?1:0; isGE=navigator.userAgent.indexOf('Gecko')>-1&&window.updateCommands?1:0; 67 isIE=navigator.appName=='Microsoft Internet Explorer'&&window.navigator.systemLanguage&&!window.opera?1:0; 68 isVL=document.all&&document.namespaces?1:0; outer=document.createElement('div'); 69 parent.style.position=(cs.position=='static'?'relative':cs.position); 70 cz=parent.style.zIndex>=0?(parent.style.zIndex-0+2):2; 71 if(isIE && !cs.hasLayout) {parent.style.zoom=1;} 72 outer.style.position='absolute'; outer.style.overflow='hidden'; 73 outer.style.display='block'; outer.style.zIndex=cz; 74 outer.style.left=0+'px'; outer.style.top=0+'px'; 75 outer.style.width='100%'; outer.style.height='100%'; 76 if(isIE) {outer.className='buzy_ele'; outer.style.zoom=1; outer.style.margin='0px'; outer.style.padding='0px'; outer.style.height=(parent.offsetHeight-parseWidth(cs.borderBottomWidth)-parseWidth(cs.borderTopWidth)); outer.style.width=(parent.offsetWidth-parseWidth(cs.borderLeftWidth)-parseWidth(cs.borderRightWidth));} 77 if(typeof(cs.borderRadius)=="undefined"){ 78 if(typeof(cs.MozBorderRadius)!="undefined"){ 79 lt=parseFloat(cs.MozBorderRadiusTopleft)-Math.min(parseFloat(cs.borderLeftWidth),parseFloat(cs.borderTopWidth)); 80 rt=parseFloat(cs.MozBorderRadiusTopright)-Math.min(parseFloat(cs.borderRightWidth),parseFloat(cs.borderTopWidth)); 81 lb=parseFloat(cs.MozBorderRadiusBottomleft)-Math.min(parseFloat(cs.borderLeftWidth),parseFloat(cs.borderBottomWidth)); 82 rb=parseFloat(cs.MozBorderRadiusBottomright)-Math.min(parseFloat(cs.borderRightWidth),parseFloat(cs.borderBottomWidth)); 83 outer.style.MozBorderRadiusTopleft=lt+"px"; outer.style.MozBorderRadiusTopright=rt+"px"; outer.style.MozBorderRadiusBottomleft=lb+"px"; outer.style.MozBorderRadiusBottomright=rb+"px"; 84 }else if(typeof(cs.WebkitBorderRadius)!="undefined"){ 85 lt=parseFloat(cs.WebkitBorderTopLeftRadius)-Math.min(parseFloat(cs.borderLeftWidth),parseFloat(cs.borderTopWidth)); 86 rt=parseFloat(cs.WebkitBorderTopRightRadius)-Math.min(parseFloat(cs.borderRightWidth),parseFloat(cs.borderTopWidth)); 87 lb=parseFloat(cs.WebkitBorderBottomLeftRadius)-Math.min(parseFloat(cs.borderLeftWidth),parseFloat(cs.borderBottomWidth)); 88 rb=parseFloat(cs.WebkitBorderBottomRightRadius)-Math.min(parseFloat(cs.borderRightWidth),parseFloat(cs.borderBottomWidth)); 89 outer.style.WebkitBorderTopLeftRadius=lt+"px"; outer.style.WebkitBorderTopRightRadius=rt+"px"; outer.style.WebkitBorderBottomLeftRadius=lb+"px"; outer.style.WebkitBorderBottomRightRadius=rb+"px"; 90 } 91 }else { 92 lt=parseFloat(cs.borderTopLeftRadius)-Math.min(parseFloat(cs.borderLeftWidth),parseFloat(cs.borderTopWidth)); 93 rt=parseFloat(cs.borderTopRightRadius)-Math.min(parseFloat(cs.borderRightWidth),parseFloat(cs.borderTopWidth)); 94 lb=parseFloat(cs.borderBottomLeftRadius)-Math.min(parseFloat(cs.borderLeftWidth),parseFloat(cs.borderBottomWidth)); 95 rb=parseFloat(cs.borderBottomRightRadius)-Math.min(parseFloat(cs.borderRightWidth),parseFloat(cs.borderBottomWidth)); 96 outer.style.borderTopLeftRadius=lt+"px"; outer.style.borderTopRightRadius=rt+"px"; outer.style.borderBottomLeftRadius=lb+"px"; outer.style.borderBottomRightRadius=rb+"px"; 97 } 98 parent.appendChild(outer); 99 inner=document.createElement('div'); 100 inner.style.position='absolute'; inner.style.cursor='progress'; 101 inner.style.display='block'; inner.style.zIndex=(cz-1); 102 inner.style.left=0+'px'; inner.style.top=0+'px'; 103 inner.style.width=100+'%'; inner.style.height=100+'%'; 104 inner.style.backgroundColor=color; 105 if(isIE) {inner.style.zoom=1; inner.style.margin='0px'; inner.style.padding='0px'; inner.style.height=outer.style.height; inner.style.width=outer.style.width; } 106 if(typeof(cs.borderRadius)=="undefined"){ 107 if(typeof(cs.MozBorderRadius)!="undefined"){ 108 inner.style.MozBorderRadiusTopleft=lt+"px"; inner.style.MozBorderRadiusTopright=rt+"px"; inner.style.MozBorderRadiusBottomleft=lb+"px"; inner.style.MozBorderRadiusBottomright=rb+"px"; 109 }else if(typeof(cs.WebkitBorderRadius)!="undefined"){ 110 inner.style.WebkitBorderTopLeftRadius=lt+"px"; inner.style.WebkitBorderTopRightRadius=rt+"px"; inner.style.WebkitBorderBottomLeftRadius=lb+"px"; inner.style.WebkitBorderBottomRightRadius=rb+"px"; 111 } 112 }else { 113 inner.style.borderTopLeftRadius=lt+"px"; inner.style.borderTopRightRadius=rt+"px"; inner.style.borderBottomLeftRadius=lb+"px"; inner.style.borderBottomRightRadius=rb+"px"; 114 } 115 if(isIE) {inner.style.filter="alpha(opacity="+parseInt(opacity*100)+")";}else {inner.style.opacity=opacity;} 116 outer.appendChild(inner); 117 size=Math.max(16,Math.min(512,(typeof busy['size']==='number'?(busy['size']==0?32:busy['size']):32))); 118 if(isVL){if(document.namespaces['v']==null) {var stl = document.createStyleSheet(); stl.addRule("v\\:*", "behavior: url(#default#VML);"); document.namespaces.add("v", "urn:schemas-microsoft-com:vml");}} 119 if(!isCV){canvas=document.createElement("div");} 120 canvas.style.position='absolute'; 121 canvas.style.cursor='progress'; canvas.style.zIndex=(cz-0+1); 122 canvas.style.top='50%'; canvas.style.left='50%'; 123 canvas.style.marginTop='-'+(size/2)+'px'; 124 canvas.style.marginLeft='-'+(size/2)+'px'; 125 canvas.width=size; canvas.height=size; 126 canvas.style.width=size+"px"; canvas.style.height=size+"px"; 127 outer.appendChild(canvas); 128 if(typeof(text)!=""){ 129 string=document.createElement('div'); 130 string.style.position='absolute'; string.style.overflow='hidden'; 131 string.style.cursor='progress'; string.style.zIndex=(cz-0+1); 132 string.style.top='50%'; string.style.left='0px'; 133 string.style.marginTop=2+(size/2)+'px'; string.style.textAlign='center'; 134 string.style.width=100+'%'; string.style.height='auto'; 135 if(typeof(styles)!=""){ 136 string.innerHTML='<span '+(styles.match(/:/i)?'style':'class')+'="'+styles+'">'+text+'</span>'; 137 }else { 138 string.innerHTML='<span>'+text+'</span>'; 139 } outer.appendChild(string); 140 } 141 if(isGE){ 142 outer.style.MozUserSelect="none"; inner.style.MozUserSelect="none"; canvas.style.MozUserSelect="none"; 143 }else if(isWK){ 144 outer.style.KhtmlUserSelect="none"; inner.style.KhtmlUserSelect="none"; canvas.style.KhtmlUserSelect="none"; 145 }else if(isIE){ 146 outer.style.unselectable="on"; inner.style.unselectable="on"; canvas.style.unselectable="on"; 147 } 148 if(isVL){ 149 ctrl=getBusyVL(canvas,busy['color'],busy['size'],busy['type'],busy['iradius'],busy['weight'],busy['count'],busy['speed'],busy['minopac']); ctrl.start(); 150 }else if(isCV){ 151 ctrl=getBusyCV(canvas.getContext("2d"),busy['color'],busy['size'],busy['type'],busy['iradius'],busy['weight'],busy['count'],busy['speed'],busy['minopac']); ctrl.start(); 152 }else { 153 ctrl=getBusy(canvas,busy['color'],busy['size'],busy['type'],busy['iradius'],busy['weight'],busy['count'],busy['speed'],busy['minopac']); ctrl.start(); 154 } 155 if(isIE) { parent.onresize = onIEWinResize; } 156 return {remove: function (){if(waiting){waiting=false; ctrl.stop(); delete ctrl; parent.removeChild(outer);} } }; 157 } 158 } 159} 160function getBusy(obj,cl,sz,tp,ir,w,ct,sp,mo) { 161 function getHEX(v){ 162 var col=v||'#000000'; 163 if(!col.match(/^#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) { 164 if(v.match(/^#[0-9a-f][0-9a-f][0-9a-f]$/i)) {col='#'+v.substr(1,1)+v.substr(1,1)+v.substr(2,1)+v.substr(2,1)+v.substr(3,1)+v.substr(3,1);} 165 }return col; 166 } 167 var running=false,i=0,os=0,al=0,f=100,c,h,p,t,x,y,v,hp,ph,sh,ele=new Array();; 168 c=getHEX(cl); tp=tp||"t"; t=(tp.match(/^[coprt]/i)?tp.substr(0,1).toLowerCase():'t'); 169 ct=Math.max(5,Math.min(36,ct||12)); sp=Math.max(30,Math.min(1000,sp||96)); 170 sz=Math.max(16,Math.min(512,sz||32)); ir=Math.max(1,Math.min((sz/2)-2,ir||sz/4)); 171 w=Math.max(1,Math.min((sz/2)-ir,w||sz/10)); mo=Math.max(0,Math.min(0.5,mo||0.25)); 172 al=360/ct; hp=(Math.PI/2)*-1; ph=Math.PI/180; w=(t!='c'?parseInt((w/2)*3):w); v=parseInt((sz/2)-(w/2)); 173 for(i=0;i<ct;i++) { 174 sh=document.createElement('div'); 175 x=Math.round(v+v*Math.cos(hp+(i+1)*al*ph)); 176 y=Math.round(v+v*Math.sin(hp+(i+1)*al*ph)); 177 sh.style.position='absolute'; sh.style.margin='0px'; 178 sh.style.width=w+'px'; sh.style.height=w+'px'; 179 sh.style.lineHeight='1px'; sh.style.fontSize='0px'; 180 sh.style.top=y+'px'; sh.style.left=x+'px'; sh.style.backgroundColor=c; 181 if(document.all&&!window.opera) {sh.style.filter="alpha(opacity="+parseInt(Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1))))*100)+")"; 182 }else {sh.style.opacity=Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1)))); } 183 obj.appendChild(sh); ele[i]=sh; 184 } 185 function nextLoop(){ 186 if(!running) {return;} os=(os+1)%ct; 187 if(document.all&&!window.opera) { 188 for(i=0;i<ct;i++){al=((os+i)%ct); ele[al].style.filter="alpha(opacity="+parseInt(Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1))))*100)+")";} 189 }else { 190 for(i=0;i<ct;i++){al=((os+i)%ct); ele[al].style.opacity=Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1))));} 191 } setTimeout(nextLoop,sp); 192 } 193 nextLoop(0); 194 return { 195 start: function (){if(!running){running=true; nextLoop(0);}}, 196 stop: function (){running=false; for(i=0;i<ct;i++) {if(document.all&&!window.opera) {ele[i].style.filter="alpha(opacity=0)";}else {ele[i].setAttribute('opacity',0);}}}, 197 pause: function (){running=false; } 198 }; 199} 200function getBusyVL(obj,cl,sz,tp,ir,w,ct,sp,mo) { 201 function getHEX(v){ 202 var col=v||'#000000'; 203 if(!col.match(/^#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) { 204 if(v.match(/^#[0-9a-f][0-9a-f][0-9a-f]$/i)) {col='#'+v.substr(1,1)+v.substr(1,1)+v.substr(2,1)+v.substr(2,1)+v.substr(3,1)+v.substr(3,1);} 205 }return col; 206 } 207 var running=false,os=0,al=0,f=100,c,i,h,p,t,x,y,hs,qs,hw,qw,rp,sh,fl,ele=new Array();; 208 c=getHEX(cl); tp=tp||"t"; t=(tp.match(/^[coprt]/i)?tp.substr(0,1).toLowerCase():'t'); 209 ct=Math.max(5,Math.min(36,ct||12)); sp=Math.max(30,Math.min(1000,sp||96)); 210 sz=Math.max(16,Math.min(512,sz||32)); ir=Math.max(1,Math.min((sz/2)-2,ir||sz/4)); 211 w=Math.max(1,Math.min((sz/2)-ir,w||sz/10)); mo=Math.max(0,Math.min(0.5,mo||0.25)); 212 h=(sz/2)-ir; x=sz/2; y=x; al=360/ct; hs=parseInt((sz/2)*f); qs=parseInt(hs/2); 213 hw=parseInt((w/2)*f); qw=parseInt(hw/2); rp=hs-parseInt(ir*f); 214 switch(t) { 215 case "c": p='m '+hs+','+(rp-hw)+' ar '+(hs-hw)+','+(rp-hw-hw)+','+(hs+hw)+','+rp+','+(hs-hw)+','+(rp-hw-hw)+','+(hs-hw)+','+(rp-hw-hw)+' e'; break; 216 case "p": p='m '+(hs-qw)+',0 l '+(hs-hw)+','+rp+','+(hs+hw)+','+rp+','+(hs+qw)+',0 x e'; break; 217 case "o": p='m '+hs+','+(rp-qs)+' ar '+(hs-hw)+',0,'+(hs+hw)+','+rp+','+(hs-hw)+',0,'+(hs-hw)+',0 e'; break; 218 case "t": p='m '+(hs-hw)+','+rp+' l '+(hs-hw)+','+hw+' qy '+hs+',0 qx '+(hs+hw)+','+hw+' l '+(hs+hw)+','+rp+' x e'; break; 219 default: p='m '+(hs-hw)+',0 l '+(hs-hw)+','+rp+','+(hs+hw)+','+rp+','+(hs+hw)+',0 x e'; break; 220 } 221 for(i=0;i<ct;i++) { 222 sh=document.createElement('v:shape'); 223 sh.setAttribute('filled','t'); 224 sh.setAttribute('stroked','f'); 225 sh.setAttribute('coordorigin','0,0'); 226 sh.setAttribute('coordsize',(sz*f)+','+(sz*f)); 227 sh.setAttribute('path',p); 228 sh.style.rotation=(i*al); 229 sh.style.position='absolute'; sh.style.margin='0px'; 230 sh.style.width=sz+'px'; sh.style.height=sz+'px'; 231 sh.style.top='-1px'; sh.style.left='-1px'; 232 obj.appendChild(sh); 233 fl=document.createElement('v:fill'); 234 fl.setAttribute('color',c); 235 fl.setAttribute('opacity',Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1))))); 236 sh.appendChild(fl); 237 ele[i]=fl; 238 } 239 function nextLoop(){ 240 if(!running) {return;} 241 os=(os+1)%ct; 242 for(i=0;i<ct;i++){ al=((os+i)%ct); 243 ele[al].setAttribute('opacity',Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1))))); 244 }setTimeout(nextLoop,sp); 245 } 246 nextLoop(0); 247 return { 248 start: function (){if(!running){running=true; nextLoop(0);}}, 249 stop: function (){running=false; for(i=0;i<ct;i++) {ele[i].setAttribute('opacity',0);}}, 250 pause: function (){running=false; } 251 }; 252} 253function getBusyCV(ctx,cl,sz,tp,ir,w,ct,sp,mo) { 254 function getRGB(v){ 255 function hex2dec(h){return(Math.max(0,Math.min(parseInt(h,16),255)));} 256 var r=0,g=0,b=0; v = v||'#000'; if(v.match(/^#[0-9a-f][0-9a-f][0-9a-f]$/i)) { 257 r=hex2dec(v.substr(1,1)+v.substr(1,1)),g=hex2dec(v.substr(2,1)+v.substr(2,1)),b=hex2dec(v.substr(3,1)+v.substr(3,1)); 258 }else if(v.match(/^#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i)) { 259 r=hex2dec(v.substr(1,2)),g=hex2dec(v.substr(3,2)),b=hex2dec(v.substr(5,2)); 260 } return r+','+g+','+b; 261 } 262 function drawOval(ctx,w,h){ctx.beginPath(); ctx.moveTo(-w/2,h/2); ctx.quadraticCurveTo(-w/2,0,0,0); ctx.quadraticCurveTo(w/2,0,w/2,h/2); ctx.quadraticCurveTo(w/2,h,0,h); ctx.quadraticCurveTo(-w/2,h,-w/2,h/2); ctx.fill();} 263 function drawTube(ctx,w,h){ctx.beginPath(); ctx.moveTo(w/2,0); ctx.lineTo(-w/2,0); ctx.lineTo(-w/2,h-(w/2)); ctx.quadraticCurveTo(-w/2,h,0,h); ctx.quadraticCurveTo(w/2,h,w/2,h-(w/2)); ctx.fill();} 264 function drawPoly(ctx,w,h){ctx.beginPath(); ctx.moveTo(w/2,0); ctx.lineTo(-w/2,0); ctx.lineTo(-w/4,h); ctx.lineTo(w/4,h); ctx.fill();} 265 function drawCirc(ctx,r,z){ctx.beginPath(); ctx.arc(r,r,r,0,Math.PI*2,false); ctx.fill();} 266 var running=false,os=0,al=0,c,i,h,t,x,y; 267 c=getRGB(cl); tp=tp||"t"; t=(tp.match(/^[coprt]/i)?tp.substr(0,1).toLowerCase():'t'); 268 ct=Math.max(5,Math.min(36,ct||12)); sp=Math.max(30,Math.min(1000,sp||96)); 269 sz=Math.max(16,Math.min(512,sz||32)); ir=Math.max(1,Math.min((sz/2)-2,ir||sz/4)); 270 w=Math.max(1,Math.min((sz/2)-ir,w||sz/10)); mo=Math.max(0,Math.min(0.5,mo||0.25)); 271 h=(sz/2)-ir; x=sz/2; y=x; 272 function nextLoop(){ 273 if(!running) {return;} 274 os=(os+1)%ct; ctx.clearRect(0,0,sz,sz); ctx.save(); ctx.translate(x,y); 275 for(i=0;i<ct;i++){ al=2*((os+i)%ct)*Math.PI/ct; 276 ctx.save(); ctx.translate(ir*Math.sin(-al),ir*Math.cos(-al)); ctx.rotate(al); 277 ctx.fillStyle='rgba('+c+','+Math.min(1,Math.max(mo,1-((ct+1-i)/(ct+1))))+')'; 278 switch(t) {case "c": drawCirc(ctx,w/2,h); break; case "o": drawOval(ctx,w,h); break; case "p": drawPoly(ctx,w,h); break; case "t": drawTube(ctx,w,h); break; default: ctx.fillRect(-w/2,0,w,h); break;} ctx.restore(); 279 } ctx.restore(); 280 setTimeout(nextLoop,sp); 281 } 282 nextLoop(0); 283 return { 284 start: function (){if(!running){running=true; nextLoop(0);}}, 285 stop: function (){running=false; ctx.clearRect(0,0,sz,sz); }, 286 pause: function (){running=false; } 287 }; 288}