Drawing a line
Now that we have setup canvas and context, it's time for methods ..before we get into that ,we just have to note that the pixel(coordinate) convention ,as canvas is a '2d' grid ,the upper left corner is (0,0) ==> (x,y).
and as we move to the right x coordinate increases , if we go down y coordinate increases.
For drawing a line we first go to the point where we want to start the line and from that position we draw a line to the end point.So we need two points.
We do that using different methods( )
- beginPath( ) - declareswhere we are about to draw the new path
- moveTo( ) - it positions the context point
- lineTo( ) - it draws a straight line from starting point to ending point
- stroke( ) - to fill the outline of the path.(by default stroke =0 )
Don't forget to use stroke( ) because we can't see line without it , line is not visible as stroke is zero by default.
More stylesm to line :
More stylesm to line :
- lineWidth - to define the width of line .
- strokeStyle - to color the canvas line .
- lineCap - it has three styles (square ,butt and round )
The strokeStyle can be set to a color string such as grey, green, red,blue, a hex value such as #000000 or #333, or an RGB value such as rgb(255,160, 0).
Default style of line cap is "butt".
0 comments:
Post a comment
Please Enter your comment here......