WaterDrop_ff

ZC: 共用一个定时器，貌似效果比各自一个定时器，效果好。在画的圆圈比较多的情况下，Android FireFox 各自一个定时器容易出现假死现象；共用一个定时器貌似没有此现象。但是，也可能是我定时器没用好...

1、

每个圆圈一个定时器

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 
  3 <html>
  4 
  5 <style type="text/css">
  6 
  7 #div01
  8 {
  9     width:800px;
 10     height:600px;
 11     background:url('lake02.jpg') no-repeat;
 12     background-size:100%;
 13 }
 14 
 15 #myCanvas:-webkit-full-screen
 16 {
 17     width:100%;
 18     height:100%;
 19 /*
 20     position:absolute;
 21     z-index:1;
 22     background:url(loading.gif) no-repeat 50% 50% !important;
 23     */
 24 }
 25 
 26 #myCanvas:-moz-full-screen
 27 {
 28     width:100%;
 29     height:100%;
 30 /*
 31     position:absolute;
 32     z-index:1;
 33     background:url(loading.gif) no-repeat 50% 50% !important;
 34     */
 35 }
 36 
 37 </style>
 38 
 39 <script type="text/javascript" >
 40 
 41     var g_canvas = null;
 42     var g_ctx = null;
 43 
 44     var g_iNormalWidth = 0;
 45     var g_iNormalHeight = 0;
 46 
 47     window.onload = function()
 48     {
 49     // http://www.365mini.com/page/html5-canvas-circle.htm
 50         //获取Canvas对象(画布)
 51         g_canvas = document.getElementById("myCanvas");
 52         //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
 53         if(g_canvas.getContext)
 54         {  
 55             //获取对应的CanvasRenderingContext2D对象(画笔)
 56             g_ctx = g_canvas.getContext("2d");  
 57         }
 58         
 59         if (Video_Fullscreen_EventBind_FF() != 0)
 60             //console.log("document 全屏事件绑定失败");
 61             alert("document 全屏事件绑定失败");
 62 
 63         var mycan = document.getElementById("myCanvas");
 64         mycan.setAttribute("width", screen.availWidth+"px");
 65         mycan.setAttribute("height",screen.availHeight+"px");
 66 
 67         var rt = mycan.getBoundingClientRect();
 68         console.log("onload : "+rt.left+" , "+rt.top+" , "+rt.right+" , "+rt.bottom);
 69         g_iNormalWidth = (rt.right - rt.left);
 70         g_iNormalHeight= (rt.bottom- rt.top);
 71 
 72         var btnFullScreen = document.getElementById("btnFullScreen");
 73         btnFullScreen.style.width = screen.availWidth * 2 +"px";
 74     };
 75 
 76 
 77     // ZC: 定时器(setInterval) 回调函数
 78     function CircleChange(_iIdx)
 79     {
 80         var circleInfo = g_circle[_iIdx];
 81         circleInfo.FiR *= 1.5;
 82         circleInfo.FiItervalCnt ++;
 83         if (circleInfo.FiItervalCnt > g_iItervalCnt)
 84         {
 85         //    circleInfo.FiR = 50;
 86             clearInterval(circleInfo.FhInterval);
 87             delete g_circle[_iIdx];
 88             delete circleInfo;
 89         }
 90 
 91         DrawCircle();
 92     }
 93 
 94     var g_iCircleId = 0;
 95     var g_circle = {};
 96 
 97     var g_iR = 10;            // 绘制的圆圈的半径
 98     var g_iIterval = 400;    // 绘制圆圈的时间间隔
 99     var g_iItervalCnt = 10; // 一共绘制圆圈 10次
100 
101     function TcircleInfo()
102     {
103         this.FiCircleId = g_iCircleId;
104         g_iCircleId ++;
105         g_circle[this.FiCircleId] = this;
106 
107         this.FhInterval = null;
108         this.FiItervalCnt = 0;
109 
110         this.FiX = 0;
111         this.FiY = 0;
112         this.FiR = g_iR;
113 
114         this.FstrLineWidth = "5";
115         //this.FstrStrokeStyle = "blue";
116         this.FstrStrokeStyle = ColorRandom();
117         console.log("this.FstrStrokeStyle : "+this.FstrStrokeStyle);
118     }
119 
120 
121     function DrawCircle()
122     {
123         if (! g_ctx)
124             return;
125 
126         var mycan = document.getElementById("myCanvas");
127         var rt = mycan.getBoundingClientRect();
128         g_ctx.clearRect(rt.left, rt.top, rt.right, rt.bottom);
129         //alert(rt.left+" , "+rt.top+" , "+(rt.right-rt.left)+" , "+(rt.bottom-rt.top));
130         //console.log(rt.left+" , "+rt.top+" , "+rt.right+" , "+rt.bottom);
131 
132         for (var i in g_circle)
133         {
134             g_ctx.beginPath();
135 
136             var circleInfo = g_circle[i];
137             g_ctx.strokeStyle = circleInfo.FstrStrokeStyle;
138             g_ctx.lineWidth = 5;//FstrLineWidth;
139             g_ctx.arc(circleInfo.FiX, circleInfo.FiY, circleInfo.FiR, 0, Math.PI * 2, false);
140             g_ctx.stroke();
141 
142             g_ctx.closePath();
143         }
144     }
145 
146 
147     function AudioRestart()
148     {
149         var autio = document.getElementById("idAutio");
150         autio.currentTime = 0;//.stop();
151         autio.play();
152     }
153 
154     function Click(_event)
155     {
156         console.log("Click : "+_event.clientX+" , "+_event.clientY);
157         AudioRestart();
158 
159         var mycan = document.getElementById("myCanvas");
160         var rt = mycan.getBoundingClientRect();
161 
162         var circleInfo = new TcircleInfo();
163         //circleInfo.FiX = _event.clientX - g_iR;
164         //circleInfo.FiY = _event.clientY - g_iR;
165         circleInfo.FiX = _event.pageX - g_iR;
166         circleInfo.FiY = _event.pageY - g_iR;
167 
168         circleInfo.FhInterval = setInterval("CircleChange("+circleInfo.FiCircleId+")", g_iIterval);
169 
170         console.log(_event.clientX+","+_event.clientY+" --> "+_event.pageX+","+_event.pageY);
171     }
172 
173     function TouchStart(_event)
174     {
175         AudioRestart();
176 
177         var targetTouches = _event.targetTouches;
178         var targetTouch = targetTouches[targetTouches.length-1];
179         console.log("TouchStart : "+targetTouch.pageX+" , "+targetTouch.pageY);
180 
181         var mycan = document.getElementById("myCanvas");
182         var rt = mycan.getBoundingClientRect();
183 
184         var circleInfo = new TcircleInfo();
185         circleInfo.FiX = (targetTouch.pageX) * g_iNormalWidth / (rt.right - rt.left);
186         circleInfo.FiY = (targetTouch.pageY) * g_iNormalHeight/ (rt.bottom- rt.top);
187 
188         circleInfo.FhInterval = setInterval("CircleChange("+circleInfo.FiCircleId+")", g_iIterval);
189     }
190 
191 
192 
193     function Fullscreen_Request_FF(_strId)
194     {
195         console.log("Fullscreen_Request : "+_strId);
196         var docele = document.getElementById(_strId);
197 
198         if (docele.mozRequestFullScreen)
199             docele.mozRequestFullScreen();
200         else
201         {
202             alert("不支持全屏模式");
203             return -1;
204         }
205 
206     //window.screen.lockOrientation(["landscape-primary", "landscape-secondary"]);
207     //window.screen.lockOrientation(["portrait-primary", "portrait-secondary"]);
208         return 0;
209     }
210 
211     function Video_Fullscreen_EventBind_FF()
212     {
213         if (document.mozFullScreenEnabled)
214         {
215             document.addEventListener
216             (
217                 "mozfullscreenchange",
218                 function()
219                 {
220                     if (document.mozFullScreenElement)
221                     {
222                         try
223                         {
224                             //screen.orientation.lock("landscape-primary");
225                         }
226                         catch (e)
227                         {
228                             //alert(e.message);
229                         }
230                     }
231                     else
232                         console.log("event-->mozfullscreenchange-->out ==> document.mozFullScreenElement : "+document.mozFullScreenElement);
233                 },
234                 false
235             ); 
236         }
237         else
238             return -1;
239 
240         return 0;
241     }
242 
243     function ColorRandom()
244     {
245         // 2^24 = 16 777 216
246         var i = Math.ceil(Math.random() * 16777216);
247         return Int2RGB(i);
248     }
249 
250     function Int2RGB(_i)
251     {
252         var i1 = _i % 256;
253         _i = Math.ceil(_i / 256);
254         var i2 = _i % 256;
255         _i = Math.ceil(_i / 256);
256         var i3 = _i % 256;
257 
258         var str = "rgb("+i3+","+i2+","+i1+")";
259         return str;
260     }
261 
262 </script>
263 
264 <audio id="idAutio">
265     <source src="waterdrop.mp3" type="audio/mpeg">
266     Your browser does not support the audio tag.<br/>
267 </audio>
268 
269 
270 
271 <body>
272 
273 <!--
274     <canvas id="myCanvas" width="1052px" height="440px" style="border: 1px solid red; background:url('lake01.jpg') no-repeat; background-size:cover;" ontouchstart="TouchStart(event)" onclick="Click(event)">
275     -->
276     <canvas id="myCanvas" width="1052px" height="440px" style="border: 1px solid red; background:url('lake01.jpg') no-repeat; background-size:cover;" ontouchstart="TouchStart(event)" >
277         您的浏览器不支持canvas标签。
278     </canvas>
279 </body>
280 
281 <br/>
282 <input id="btnFullScreen" type="button" value="FullScreen" onclick="Fullscreen_Request_FF('myCanvas')" style="width:500px; height:150px; background-color:RGB(255,0,0)"/>
283 
284 
285 </html>

2、

所有圆圈使用一个定时器

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 
  3 <html>
  4 
  5 <style type="text/css">
  6 
  7 #div01
  8 {
  9     width:800px;
 10     height:600px;
 11     background:url('lake02.jpg') no-repeat;
 12     background-size:100%;
 13 }
 14 
 15 #myCanvas:-webkit-full-screen
 16 {
 17     width:100%;
 18     height:100%;
 19 /*
 20     position:absolute;
 21     z-index:1;
 22     background:url(loading.gif) no-repeat 50% 50% !important;
 23     */
 24 }
 25 
 26 #myCanvas:-moz-full-screen
 27 {
 28     width:100%;
 29     height:100%;
 30 /*
 31     position:absolute;
 32     z-index:1;
 33     background:url(loading.gif) no-repeat 50% 50% !important;
 34     */
 35 }
 36 
 37 </style>
 38 
 39 <script type="text/javascript" >
 40 
 41     var g_canvas = null;
 42     var g_ctx = null;
 43 
 44     var g_iNormalWidth = 0;
 45     var g_iNormalHeight = 0;
 46 
 47     window.onload = function()
 48     {
 49     // http://www.365mini.com/page/html5-canvas-circle.htm
 50         //获取Canvas对象(画布)
 51         g_canvas = document.getElementById("myCanvas");
 52         //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
 53         if(g_canvas.getContext)
 54         {  
 55             //获取对应的CanvasRenderingContext2D对象(画笔)
 56             g_ctx = g_canvas.getContext("2d");  
 57         }
 58         
 59         if (Video_Fullscreen_EventBind_FF() != 0)
 60             //console.log("document 全屏事件绑定失败");
 61             alert("document 全屏事件绑定失败");
 62 
 63         var mycan = document.getElementById("myCanvas");
 64         mycan.setAttribute("width", screen.availWidth+"px");
 65         mycan.setAttribute("height",screen.availHeight+"px");
 66 
 67         var rt = mycan.getBoundingClientRect();
 68         console.log("onload : "+rt.left+" , "+rt.top+" , "+rt.right+" , "+rt.bottom);
 69         g_iNormalWidth = (rt.right - rt.left);
 70         g_iNormalHeight= (rt.bottom- rt.top);
 71 
 72         var btnFullScreen = document.getElementById("btnFullScreen");
 73         btnFullScreen.style.width = screen.availWidth * 2 +"px";
 74 
 75         setInterval(CircleChange, g_iItervalTimer);
 76     };
 77 
 78 
 79     // ZC: 定时器(setInterval) 回调函数
 80     function CircleChange(_iIdx)
 81     {
 82         if (! g_ctx)
 83             return;
 84 
 85         // ZC: 清空画布
 86         var mycan = document.getElementById("myCanvas");
 87         var rt = mycan.getBoundingClientRect();
 88         g_ctx.clearRect(rt.left, rt.top, rt.right, rt.bottom);
 89 
 90         var i = 0;
 91         //while (i < g_circle.length)
 92         for (var i=(g_circle.length - 1); i>=0; i--)
 93         {
 94             var circleInfo = g_circle[i];
 95 
 96             DrawCircle(circleInfo);
 97 
 98             circleInfo.FiIterval += g_iItervalTimer;
 99             if (circleInfo.FiIterval >= g_iItervalCircle)
100             {
101                 circleInfo.FiIterval = 0;
102                 circleInfo.FiR *= 1.5;
103                 circleInfo.FiItervalCnt ++;
104 
105                 if (circleInfo.FiItervalCnt > g_iItervalCnt)
106                 {
107                     delete circle;
108                     g_circle.splice(i, 1);
109                 }
110             }
111 
112             //i ++;
113         } // for i
114     }
115 
116     var g_iCircleId = 0;
117     //var g_circle = {};
118     var g_circle = [];
119 
120     var g_iR = 10;            // 绘制的圆圈的半径
121     var g_iItervalTimer = 100;    // 绘制圆圈的定时器的时间间隔
122     var g_iItervalCircle = 400;    // 绘制圆圈的时间间隔
123     var g_iItervalCnt = 10; // 一共绘制圆圈 10次
124 
125     function TcircleInfo()
126     {
127         this.FiCircleId = g_iCircleId;
128         g_iCircleId ++;
129         //g_circle[this.FiCircleId] = this;
130 
131         this.FhInterval = null;
132         this.FiItervalCnt = 0;
133 
134         this.FiIterval = 0;
135 
136         this.FiX = 0;
137         this.FiY = 0;
138         this.FiR = g_iR;
139 
140         this.FstrLineWidth = "5";
141         //this.FstrStrokeStyle = "blue";
142         this.FstrStrokeStyle = ColorRandom();
143         console.log("this.FstrStrokeStyle : "+this.FstrStrokeStyle);
144     }
145 
146 
147     function DrawCircle(_circleInfo)
148     {
149         if (! g_ctx)
150             return;
151 
152         g_ctx.beginPath();
153 
154         g_ctx.strokeStyle = _circleInfo.FstrStrokeStyle;
155         g_ctx.lineWidth = _circleInfo.FstrLineWidth;
156         g_ctx.arc(_circleInfo.FiX, _circleInfo.FiY, _circleInfo.FiR, 0, Math.PI * 2, false);
157         g_ctx.stroke();
158 
159         g_ctx.closePath();
160     }
161 
162 
163     function AudioRestart()
164     {
165         var autio = document.getElementById("idAutio");
166         autio.currentTime = 0;//.stop();
167         autio.play();
168     }
169 
170     function Click(_event)
171     {
172         console.log("Click : "+_event.clientX+" , "+_event.clientY);
173         AudioRestart();
174 
175         var mycan = document.getElementById("myCanvas");
176         var rt = mycan.getBoundingClientRect();
177 
178         var circleInfo = new TcircleInfo();
179         //circleInfo.FiX = _event.clientX - g_iR;
180         //circleInfo.FiY = _event.clientY - g_iR;
181         circleInfo.FiX = _event.pageX - g_iR;
182         circleInfo.FiY = _event.pageY - g_iR;
183 
184         g_circle.push(circleInfo);
185 
186         console.log(_event.clientX+","+_event.clientY+" --> "+_event.pageX+","+_event.pageY);
187     }
188 
189     function TouchStart(_event)
190     {
191         AudioRestart();
192 
193         var targetTouches = _event.targetTouches;
194         var targetTouch = targetTouches[targetTouches.length-1];
195         console.log("TouchStart : "+targetTouch.pageX+" , "+targetTouch.pageY);
196 
197         var mycan = document.getElementById("myCanvas");
198         var rt = mycan.getBoundingClientRect();
199 
200         var circleInfo = new TcircleInfo();
201         circleInfo.FiX = (targetTouch.pageX) * g_iNormalWidth / (rt.right - rt.left);
202         circleInfo.FiY = (targetTouch.pageY) * g_iNormalHeight/ (rt.bottom- rt.top);
203 
204         g_circle.push(circleInfo);
205     }
206 
207 
208 
209     function Fullscreen_Request_FF(_strId)
210     {
211         console.log("Fullscreen_Request : "+_strId);
212         var docele = document.getElementById(_strId);
213 
214         if (docele.mozRequestFullScreen)
215             docele.mozRequestFullScreen();
216         else
217         {
218             alert("不支持全屏模式");
219             return -1;
220         }
221 
222     //window.screen.lockOrientation(["landscape-primary", "landscape-secondary"]);
223     //window.screen.lockOrientation(["portrait-primary", "portrait-secondary"]);
224         return 0;
225     }
226 
227     function Video_Fullscreen_EventBind_FF()
228     {
229         if (document.mozFullScreenEnabled)
230         {
231             document.addEventListener
232             (
233                 "mozfullscreenchange",
234                 function()
235                 {
236                     if (document.mozFullScreenElement)
237                     {
238                         try
239                         {
240                             //screen.orientation.lock("landscape-primary");
241                         }
242                         catch (e)
243                         {
244                             //alert(e.message);
245                         }
246                     }
247                     else
248                         console.log("event-->mozfullscreenchange-->out ==> document.mozFullScreenElement : "+document.mozFullScreenElement);
249                 },
250                 false
251             ); 
252         }
253         else
254             return -1;
255 
256         return 0;
257     }
258 
259     function ColorRandom()
260     {
261         // 2^24 = 16 777 216
262         var i = Math.ceil(Math.random() * 16777216);
263         return Int2RGB(i);
264     }
265 
266     function Int2RGB(_i)
267     {
268         var i1 = _i % 256;
269         _i = Math.ceil(_i / 256);
270         var i2 = _i % 256;
271         _i = Math.ceil(_i / 256);
272         var i3 = _i % 256;
273 
274         var str = "rgb("+i3+","+i2+","+i1+")";
275         return str;
276     }
277 
278 </script>
279 
280 <audio id="idAutio">
281     <source src="waterdrop.mp3" type="audio/mpeg">
282     Your browser does not support the audio tag.<br/>
283 </audio>
284 
285 
286 
287 <body>
288 
289 <!--
290     <canvas id="myCanvas" width="1052px" height="440px" style="border: 1px solid red; background:url('lake01.jpg') no-repeat; background-size:cover;" ontouchstart="TouchStart(event)" onclick="Click(event)">
291     -->
292     <canvas id="myCanvas" width="1052px" height="440px" style="border: 1px solid red; background:url('lake01.jpg') no-repeat; background-size:cover;" ontouchstart="TouchStart(event)" >
293         您的浏览器不支持canvas标签。
294     </canvas>
295 </body>
296 
297 <br/>
298 <input id="btnFullScreen" type="button" value="FullScreen" onclick="Fullscreen_Request_FF('myCanvas')" style="width:500px; height:150px; background-color:RGB(255,0,0)"/>
299 
300 
301 </html>

3、

posted @ 2016-03-23 22:43 Html5Skill 阅读(295) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Html5Skill

WaterDrop_ff

公告