gaya Posted March 20, 2015 Share Posted March 20, 2015 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 More sharing options...
Ingolme Posted March 21, 2015 Share Posted March 21, 2015 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); }} 1 Link to comment Share on other sites More sharing options...
gaya Posted March 23, 2015 Author Share Posted March 23, 2015 (edited) 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 March 23, 2015 by gaya Link to comment Share on other sites More sharing options...
justsomeguy Posted March 23, 2015 Share Posted March 23, 2015 I suppose you'll need to change the part where it increments and checks amount3. Link to comment Share on other sites More sharing options...
Ingolme Posted March 23, 2015 Share Posted March 23, 2015 You can just switch the values of startAngle and endAngle, or change the value of counterClockwise. Link to comment Share on other sites More sharing options...
gaya Posted March 24, 2015 Author Share Posted March 24, 2015 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 More sharing options...
Ingolme Posted March 24, 2015 Share Posted March 24, 2015 After switching the startAngle and endAngle values, change the value of the counterClockwise flag to true. Link to comment Share on other sites More sharing options...
gaya Posted March 25, 2015 Author Share Posted March 25, 2015 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 More sharing options...
Ingolme Posted March 25, 2015 Share Posted March 25, 2015 Decrease the number by which you're changing amount3. Instead of amount3 += 0.2 try amount3 += 0.05 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