I am currently learning to use canvas, and do not understand the difference between these two functions. From what I have read, the translate method 'moves the canvas'? Can someone explain this?
Edit: Is moveTo only used within the context of a path?
I am currently learning to use canvas, and do not understand the difference between these two functions. From what I have read, the translate method 'moves the canvas'? Can someone explain this?
Edit: Is moveTo only used within the context of a path?
Share Improve this question edited Oct 3, 2013 at 0:48 Someone asked Oct 3, 2013 at 0:37 SomeoneSomeone 1211 silver badge7 bronze badges 02 Answers
Reset to default 8To be a little more specific than Kolink, since I think the explanation is a little muddy;
-The coordinate you pass moveTo is the starting point of a new line (or shape); As if picking up your pen off the paper and setting it in a new location (the new coordinates).
-The function of lineTo is what "move(s) the pen across the paper to draw a line" (to a new coordinate you've given it, since you need two points to draw a line, obviously)
-You can place multiple lineTo calls one after another and it will use the last point you ended on, to continue the line, like so:
ctx.moveTo(100,50);
ctx.lineTo(25,175);
ctx.lineTo(175,175);
ctx.lineTo(100,50);
ctx.stroke();
here's a simple fiddle showing the oute: http://jsfiddle/fbZKu/
(you can even "fill" these shapes you make with ctx.fill()!)
-The use of translate is to move the canvas' (0,0) coordinate (upper left corner) to the new coordinate.
I hope that clears things up a bit more! Happy coding! :)
Imagine you are drawing on graph paper.
moveTo means you take your pen and move it across the paper to draw a line.
translate means you shift the position of the paper on the table.
They could not be more different functions.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1743633727a4481797.html
评论列表（0条）