gaya
-
Posts
101 -
Joined
-
Last visited
gaya's Achievements
Member (2/7)
1
Reputation
-
The below code, The line is visible before the animation starts. I want to know how to hide that visible line? <!DOCTYPE html><html><body><canvas id="myCanvas" width="300" height="150">Your browser does not support the HTML5 canvas tag.</canvas><script src='https://code.jquery.com/jquery-2.1.3.js'></script><script>$(document).ready(function () { var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); function Character1(canvas, progress, duration, delay) { console.log("c1 " + progress); delay = delay || 1; var ctx = canvas.getContext('2d'); debugger; if (progress < duration) { canvas.strokeStyle = "black"; ctx.beginPath(); ctx.moveTo(1, 13); ctx.lineTo(1 * ((progress + 1) / duration), 30); ctx.stroke(); ctx.closePath() setTimeout(function () { Character1(canvas, progress + 1, duration, delay); }, delay); } else { debugger; $(document.body).trigger("Character1Completed"); } } // Start Drawing Character1(canvas, 0, 30, 33);});</script></body></html>
-
Hi,I want to draw animation with same speed. I am having some three functions. I want to call it one after another. Please tell me how to do it. <!DOCTYPE html><html><body><canvas id="myCanvas" width="300" height="150">Your browser does not support the HTML5 canvas tag.</canvas><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var c1 = document.getElementById("myCanvas");var ctx1 = c.getContext("2d");var c2 = document.getElementById("myCanvas");var ctx2 = c.getContext("2d");var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');var amount = 0.5;var amount1 = 0;var amount2 = 0;var amount3 = 0.4;var myVar = setInterval(function(){ myTimer2() }, 10);function myTimer2() { amount += 0.05; // change to alter duration if (amount > 1) amount = 1; c.strokeStyle = "black"; ctx.beginPath();ctx.moveTo(3, 12);ctx.lineTo(3, 30*amount);ctx.stroke();ctx.closePath()}var myVar1 = setInterval(function(){ myTimer1() }, 20);function myTimer1() { amount1 += 0.05; // change to alter duration if (amount1 > 1) amount1 = 1; c1.strokeStyle = "black"; ctx1.beginPath();ctx1.moveTo(5,30);ctx1.lineTo(30*amount1, 30);ctx1.stroke(); ctx1.closePath()}var x = 23; var y = 22; var radius = 9;var startAngle = .3* Math.PI;var endAngle = -1.3* Math.PI;var counterClockwise = false;var myVar4 = setInterval(function(){ myTimer4() }, 95);function myTimer4() { amount3 += 0.05; // change to alter duration if (amount3 > 1) amount3 = 1; context.beginPath(); context.arc(x, y, radius, startAngle, endAngle*amount3, true); context.lineWidth = 1; context.stroke();}</script></body></html> Insted of setInterval what we can use.The above code all the three are drawing at same time. I want to draw one by one but with same speed. Please help me to do it.
-
Thanks for the reply. I got the curve in anticlockwise direction. By switching the values of startAngle and endAngle also by incrementing the startAngle value. Changed the amount3 value too. <!DOCTYPE html><html><body><canvas id="myCanvas" width="300" height="150">Your browser does not support the HTML5 canvas tag.</canvas><script>var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');var amount3 = .4;var x = 23;var y = 22;var radius = 9;var startAngle = 8.3* Math.PI;var endAngle = .3 * Math.PI;var counterClockwise = false;var myVar4 = setInterval(function(){ myTimer4() }, 125);function myTimer4() { amount3 += 0.2; // change to alter duration if (amount3 > 2) amount3 = 2; context.beginPath(); context.arc(x, y, radius, startAngle*amount3, endAngle, counterClockwise); context.lineWidth = 1; context.stroke();}</script></body></html> It is drawing too fast. I want the animation to draw a little slow. I don't knw whether i have to increase or decrease the value i have give. please tell me what to be changed. Or please give some ideas to draw this curve.
-
By switching the values of startAngle and endAngle is drawing a small curve in clockwise direction. I tried by incrementing the value also. But by incrementing the value it is drawing a circle or the curve is not drawn in animation.
-
Thanks for the reply. Yes i understood your code. Sorry for asking the question again. Please i want that curve drawing in anti clockwise direction. If thats the condition where some value is to be changed. But please tell me where to change that values. <!DOCTYPE html><html><body><canvas id="myCanvas" width="300" height="150">Your browser does not support the HTML5 canvas tag.</canvas><script>var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');var amount3 = 0.4; var x = 23; var y = 22; var radius = 9; var startAngle = .7* Math.PI; var endAngle = 2.3 * Math.PI; var counterClockwise = false;var myVar4 = setInterval(function(){ myTimer4() }, 75);function myTimer4() { amount3 += 0.05; // change to alter duration if (amount3 > 1) amount3 = 1;context.beginPath(); context.arc(x, y, radius, startAngle, endAngle*amount3, counterClockwise); context.lineWidth = 1; context.stroke();}</script></body></html> In the above code it is drawing half circle but in clockwise direction. I want the same circle to be drawn in anticlockwise direction.
-
HI. I am trying to draw a animated curve. The curve is drawn. But the animation to draw the curve is not correct. please help me how to draw.My code is <!DOCTYPE html><html><body><canvas id="myCanvas" width="300" height="150">Your browser does not support the HTML5 canvas tag.</canvas><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");var c1 = document.getElementById("myCanvas");var ctx1 = c.getContext("2d");var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');var amount = 0.5;var amount1 = 0;var amount3 = 0.4;var x = 23; var y = 22; var radius = 9; var startAngle = 7.75* Math.PI; var endAngle = 0.3 * Math.PI; var counterClockwise = false;var myVar4 = setInterval(function(){ myTimer4() }, 275);function myTimer4() { amount3 += 0.05; // change to alter duration if (amount3 > 1) amount3 = 1;context.beginPath(); context.arc(x, y, radius, startAngle*amount3, endAngle, counterClockwise); context.lineWidth = 1; context.stroke();}</script>
-
Hi,i have done all in php like giving link to image, by clicking the image the value get insert into database. How shall i do this. Please tell me. The following is the code for image link and insert query. if($flag1==0) { echo "<a href='newpartshort.php?orderno=$ono∂=$part&qpid=$qpid&board=$board&subject=$subject&StudentId=$StudentId&totalrows=$totalRows1'><img src='image/redtrial.png' align='right' border=0 width='15px' height='15px'/></a>"; }$sql1="insert into valuation values('','$uid','$ono','$qno','$sub','$qpid','$tabname','$part','$mark','0','$Path1')"; Insertion should take place. Please tell me how to do this.
-
I aligned it simply by putting align="center". But my images are seenn without anyspace. How to make space or seperate my images.
-
Hi,I am having a form with a textarea and some textbox.I dont know how to align in into my form. i.e)I have aligned but i want to make the fields seen in center of the form. Please tell me how to align it.
-
Thanks justsomeguy. I included the following code to hide the editor,by clicking the button again. Thanks all.
-
Anyone please tell me. Is that possible to do.
-
Now i have done for more than one textarea. Still having one problem. By clicking the button the editor is opening. Now i want to do is, again by clicking the button i want to hide the symbols even if i have not selected anything from the editor. Please tell me what to modify for that.
-
Thanks AndrewSmith. I tried your code and its working fine. But what i am expecting is not this. The above code what i have posted is now working fine for me. Now my problem is the above code, I am having only one textarea. But in the case of having more than one textarea means how i can modify the code, that thing i don't know. Please tell me how to do that.
-
I have already tried the following code. <!DOCTYPE html><html><head> <style> .popup { position: absolute; left: 100px; top: 100px; border: 1px solid #000; background-color: #f0f0f0; } .popup .symbol { display: inline-block; padding: 5px; margin: 10px; border: 1px solid #000; } </style> <script> var symbolPopup = null; function CreateSymbolPopup () { if (symbolPopup) { return; } symbolPopup = document.createElement ('div'); symbolPopup.className = "popup"; var symbols = [8719, 8721, 8730]; for (var i = 0; i < symbols.length; i++) { var symbolButton = document.createElement ('span'); symbolButton.innerHTML = '' + symbols[i] + ';'; symbolButton.onclick = AddSymbol; symbolButton.className = "symbol"; symbolPopup.appendChild (symbolButton); } document.body.appendChild (symbolPopup); } function ShowSymbols () { CreateSymbolPopup (); symbolPopup.style.display = ""; } function HideSymbols () { if (symbolPopup) { symbolPopup.style.display = "none"; } } function AddSymbol () { var editor = document.getElementById ('editor'); editor.value += this.innerHTML; HideSymbols (); } </script></head><body> <button onclick="ShowSymbols ()">Symbols</button> <textarea id="editor"></textarea></body></html> In the above code, by clicking the symbol button,I want to display the value inside the textbox and not the symbol.Also i want the value seen inbetween font tags.
-
I cann't understand Which part do you need help with? I want help in creating the math symbols with onclick. How shall i create it.