Jump to content

call function one by one to draw animation


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...