gaya Posted April 15, 2015 Share Posted April 15, 2015 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 15, 2015 Share Posted April 15, 2015 You can use setTimeout instead of setInterval. If you want the functions to run one after another then you'll need to call one function or create a timeout from inside another function. Link to comment Share on other sites More sharing options...
mannemvamsi Posted April 15, 2015 Share Posted April 15, 2015 You call follow this tutorial http://jhtmlcss.blogspot.com/2015/04/how-to-use-javascript-settimeout-to.html Link to comment Share on other sites More sharing options...
gaya Posted April 17, 2015 Author Share Posted April 17, 2015 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> Link to comment Share on other sites More sharing options...
justsomeguy Posted April 17, 2015 Share Posted April 17, 2015 Do you have that online? It looks like the only line you're drawing is in that function. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now