Jump to content

To draw a animated curve


gaya
 Share

Recommended Posts

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>
Link to comment
Share on other sites

Many of your variable names are not very descriptive, like myVar4 and myTimer4. You have redundant variables, c, ctx, c1 and ctx1.

 

This setInterval(function(){ myTimer4() }, 275) can be substituted with this: setInterval(myTimer4, 275)

 

I suppose what you want is for the animation to show the arc being drawn. It's a lot to explain, I'll rewrite your code and hopefully you'll see and understand how it works:

// Reference to canvas and contextvar canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');// Center of the arcvar centerX = 23;var centerY = 22;// Radius of the arcvar radius = 9;// Start and end angles// If the startAngle is greater than the end angle then your animation is going to play backwards// So make sure startAngle is smaller than endAngle// Remember that 2PI is a full circle, any higher than that and you'll just be drawing over what you had before.var startAngle = 0* Math.PI;var endAngle = 1.5 * Math.PI;var counterClockwise = false;// Amount complete starts at zero, when it reaches 1 the animation endsvar amountComplete = 0;// Amount per frame is the inverse of how many frames you want it to take before the animation is finished// 0.02 is 1/50, so it will take 50 frames to complete the animationvar amountPerFrame = 0.02;// The angular distance between the start and end anglesvar angleSize = endAngle - startAngle;// Begin running the animationvar timer = setInterval(drawArc, 33);// The drawing functionfunction drawArc() {    // Erase everything on the canvas to begin drawing this frame    context.clearRect(0, 0, canvas.width, canvas.height);    // Add amountPerFrame to amountComplete    amountComplete += amountPerFrame;        // Get the current angular distance that should be drawn    var drawAngle = amountComplete * angleSize;        // Draw from startAngle to the current frame's amount    context.beginPath();    context.arc(centerX, centerY, radius, startAngle, startAngle + drawAngle, counterClockwise);    context.lineWidth = 1;    context.stroke();    // Stop the animation when we've reached 100%    if(amountComplete >= 1) {        clearInterval(timer);    }}
  • Like 1
Link to comment
Share on other sites

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.

Edited by gaya
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...