javascript
in [JavaScript]
|
Prev: IN127 - Senior Web Devloper with Project Management, Medicaid Eligibility,Home Care services, BPA, BPR, Solaris, Apache and system management experience
Next: what do lines starting with an "=" mean
From: Pandu on 2 Jul 2010 14:31 <html> <script type="text/JavaScript"> var posx;var posy;var example; var ctx,t,j;var theta=Math.PI;var r=100,i=1; var arrayone=new Array(); arrayone[0]=Math.PI;arrayone[1]=Math.PI/ 2;arrayone[2]=Math.PI*0;arrayone[3]=-Math.PI/2; function draw() { if(i>=60)i=1; example = document.getElementById('example'); ctx = example.getContext('2d');ctx.lineWidth = 8; if(i%2==0) { ctx.moveTo(120,120); ctx.strokeStyle = 'white'; ctx.lineTo(120+r*Math.sin(-(i-1)*Math.PI/30),120+r*Math.cos(- (i-1)*Math.PI/30)); ctx.stroke();i++; } else{ ctx.moveTo(120,120); ctx.strokeStyle = 'red'; ctx.lineTo(120+r*Math.sin(-i*Math.PI/30),120+r*Math.cos(-i*Math.PI/ 30)); ctx.stroke(); i++;} t=setTimeout("draw()",2000); } </script> <body onload="draw();"> <canvas id="example" width="500" height="500"> This text is displayed if your browser does not support HTML5 Canvas. </canvas> </body> </html> I want the red line rotate in anti clock wise direction... so i am creating a red line and then erasing it with white line.... but the code doesnt run as expected plz help !!!!!!!!!
From: Stefan Weiss on 2 Jul 2010 16:01 On 02/07/10 20:31, Pandu wrote: > <html> First of all, whenever you have problems with a script, make sure that your document validates, preferably as HTML 4.01 Strict. If the HTML foundation of your page is broken, you can't seriously begin to debug the scripts. Use this tool to check your document: http://validator.w3.org/ > <script type="text/JavaScript"> > var posx;var posy;var example; var ctx,t,j;var theta=Math.PI;var > r=100,i=1; > var arrayone=new Array(); > arrayone[0]=Math.PI;arrayone[1]=Math.PI/ > 2;arrayone[2]=Math.PI*0;arrayone[3]=-Math.PI/2; Please remove irrelevant parts from your code before you post a question. For example, the "arrayone" array is never used after this line. I also had a very hard time deciphering your code... it's customary to put only one statement per line. All of this is explained in the group FAQ: http://www.jibbering.com/faq/#posting > function draw() > { > if(i>=60)i=1; > example = document.getElementById('example'); > ctx = example.getContext('2d');ctx.lineWidth = 8; > if(i%2==0) > { > > ctx.moveTo(120,120); > > ctx.strokeStyle = 'white'; > ctx.lineTo(120+r*Math.sin(-(i-1)*Math.PI/30),120+r*Math.cos(- > (i-1)*Math.PI/30)); > ctx.stroke();i++; > } > else{ > > ctx.moveTo(120,120); > ctx.strokeStyle = 'red'; > ctx.lineTo(120+r*Math.sin(-i*Math.PI/30),120+r*Math.cos(-i*Math.PI/ > 30)); > ctx.stroke(); > i++;} The main problem with that is that you're working with the same path all the time. You keep adding lines to it, and the next stroke() call will apply to the whole path. Use ctx.beginPath() before you draw a new line. The other problem is that simply painting a white line over a red line isn't the same as clearing the red line. Try it with a black body background, and you'll see what I mean. To clear parts of a canvas, you can use the clearRect() method. This tutorial explains the basics of working with canvas elements: https://developer.mozilla.org/en/canvas_tutorial The page about animations will tell you all you need to build a canvas clock (but don't forget to read the basics, you'll need them): https://developer.mozilla.org/en/Canvas_tutorial%3aBasic_animations PS: next time, please use a more relevant subject than "javascript". -- stefan
From: Stefan Weiss on 2 Jul 2010 16:09
On 02/07/10 22:01, Stefan Weiss wrote: > First of all, whenever you have problems with a script, make sure that > your document validates, preferably as HTML 4.01 Strict. I wasn't thinking. If you're using a canvas element, it needs to validate as HTML 5 (experimental), of course. -- stefan |