I've got the following code:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(130, 0);
ctx.lineTo(130, 150);
ctx.stroke();
I've got a little messed up with the pixels and rotating the draw / line.
Let me explain, I've got normal canvas code, but rotate is not working correctly. I've tried playing a little with the numbers but I still can't get the angles I want since I can make only 180 rotation and not 270 (More or less).
Here is an image to explain what I want:
http://img689.imageshack.us/img689/1996/13648488297821.jpg
The red line is the angles I want but the black line is the angles I get (black angles and above is all I can get, under the black line I can't do any rotation to get the wanted angle).
Please don't give me CSS Code since I'm using a JavaScript code loop
The references from where I come up with this code can be found here, and here. It is much easier if you split the line and make it into two with one after the other.
For example...
ctx.beginPath();
//edit the x or y to change starting point.
ctx.moveTo(50, 100);
//edit the x to change the length, and y for the angle.
//if you want a horizontal line this y must be the same as the moveto y.
ctx.lineTo(150, 100);
//This x & y must be the same as the previous lineto.
ctx.moveTo(150, 100);
//edit the x to change the length, and y for the angle.
ctx.lineTo(200, 130);
ctx.stroke();
Remember that the methods take (x,y) and as long as your first lineTo and next moveTo are the same positions you will not have a break in your two lines. Hope this helps!
Related
I am working with canvas arc function.I am unable to figure out the meaning of last two parameters.
Please help me with the meaning of parameters.Thank You
ctx.arc(x, y, 70,0, 2 * Math.PI);
That's the end angle, previous parameters say that the arc starts at 0 angle to 2PI.
2PI = 360° so you are drawing a circle.
I execute the following code:
context.arc(100,50,50,2,3);
context.stroke();
context.arc(100,50,50,2,3);
context.stroke();
Why does the result is an arc and a closing line instead of one arc which is actually two identical arcs drawn the same way?
The parameters for the functions are its center coordinates, radius and angles.
According to that identical execution should give identical result to my understanding.
Thanks in advance
This happens because there are actually three segments on the paths.
The first arc draws a sub-path like this:
Then the path cursor is moved back to start since it has the same location as the first arc, and in the process it will create a line since all paths are currently connected:
To avoid it you can break up the sub-path by creating a new one by using moveTo() and move the cursor to the position the next arc will start, or simply clear the current path and start a new:
Example
var context = c.getContext("2d");
context.arc(100,50,50,2,3);
context.stroke();
context.beginPath();
context.arc(100,50,50,2,3);
context.stroke();
<canvas id=c></canvas>
To use moveTo() you would have to calculate the angle using:
centerX + cos(angle) x radius
centerY + sin(angle) x radius
Example
var context = c.getContext("2d");
context.arc(100,50,50,2,3);
context.stroke();
context.moveTo(100 + Math.cos(2) * 50, 50 + Math.sin(2) * 50);
context.arc(100,50,50,2,3);
context.stroke();
<canvas id=c></canvas>
Html:
HTML:
<canvas id="main" height="1000" width="1500"></canvas>
JS
var c = document.getElementById("main");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(200,300);
ctx.lineTo(800,0);
ctx.moveTo(800,0);
ctx.lineTo(1500,300);
ctx.moveTo(1500,300);
ctx.lineTo(200,300);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="#8ED6FF";
ctx.fill();
JSFiddle
Fiddle
Updated code
var c = document.getElementById("main");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(200,300);
ctx.lineTo(800,0);
ctx.lineTo(1500,300);
ctx.lineTo(200,300);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="#8ED6FF";
ctx.fill();
You dont need to move to same point again as you are already on that point .. so thats why it wasnt working
Sub-paths
This will create (clear) a new main path, so far so good:
ctx.beginPath();
The moveTo() call will create a new sub-path on the main path, here:
ctx.moveTo(200,300);
ctx.lineTo(800,0);
and here:
ctx.moveTo(800,0);
ctx.lineTo(1500,300);
and here:
ctx.moveTo(1500,300);
ctx.lineTo(200,300);
And finally, this will connect first point in path with the last point (in this case they are already overlapping):
ctx.closePath();
Since you now have three sub-paths which represents three unconnected lines, as they all have their own sub-paths, there is no way to fill them as a single shape. And they will not connect simply by having their points overlapping.
Create a continuous line with a single sub-path
You need to make a continuous line on the current sub-path. The lineTo() method will continue from the last point in the current path/sub-path to the coordinate it specifies, so to make a single shape using a single sub-path, you just add a new point to the sub-path by doing:
ctx.beginPath(); // new main path
ctx.moveTo(200,300); // creates a new sub-path, start point (200, 300)
ctx.lineTo(800,0); // line from (200, 300) to (800, 0), current point now: (800,0)
ctx.lineTo(1500,300); // line from (800, 0) to (1500, 300)
//ctx.lineTo(200,300); // not needed because:
ctx.closePath(); // will connect (1500,300) to (200,300) on the current sub-path
Using fill() will also close the path, internally and non-permanent, as it's impossible to fill an open path assuming it has > 2 points (it saves you a line of code, but not very important, just note that stoke() does not close the path for you internally).
Also, a tip not many are aware of: if you intended to draw more closed shapes in the same fillStyle, you could continue with moveTo() after the closePath() to create a new sub-path without the need of using fill()/beginPath() first..
I'm learning HTML5 and I"m stuck on arc.
syntax
arc(x, y, radius, startAngle, endAngle, anticlockwise)
I'm not getting this startAngle,endAngle perfectly how this two parameters are calculated to
draw different types of circles,arcs?
This method takes Six parameters:
x and y are the coordinates of the circle's center.
Radius is self explanatory.
The startAngle and endAngle parameters define the start and end points of the arc in radians. The starting and closing angle are measured from the x axis.
The anticlockwise parameter is a boolean value which when true draws the arc anticlockwise, otherwise in a clockwise direction.
For better understanding of startAngle and endAngle
http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
They are radians, not degrees.
Some good examples
I looked into a few answers and was very confused by degrees and radians so I drew an image when I tested using html5 canvas. Hope this one help you understand easily.
If you are more familiar with number than formulas with PI,then
The answer to put in the parameter is simply between 0-6.2831 approximately (2π,360°)
and it doesn't take either "π" or degrees(180°)
I have to draw lines around a circle (like in clock). How can i achieve this using a for loop?
I'm not sure how to do the actual drawing of a line in Java but to calculate co-ordinates from a central point (cx,cy) use
px = cx+sin(a)*r
py = cy+cos(a)*r
Where a is the angle (in radians - I think ie 180 degress=π radians) and r is the radius.
To draw the little lines around the outside you would need to use this formula with say a radius of 100 and the also with a radius of 105 and draw between the two sets of co-ordinates.
eg
for (var a=0,aMax=(2*Math.PI),aStep=(Math.PI/30); a<aMax; a+=aStep){
px1 = cx+Math.sin(a)*r;
py1 = cy+Math.cos(a)*r;
px2 = cx+Math.sin(a)*(r+5);
py2 = cy+Math.cos(a)*(r+5);
//draw line between (px1,py1) and (px2,py2)
};
Have a look at the source code of CoolClock.
you should read up on basic trigonometry and focus on Quadrants to achieve that.