HTML and CSS Reference
In-Depth Information
•
lineTo(x,y)
: Draws a line segment to a coordinate on the canvas
•
stroke()
: Colors the line
•
fill()
: Fills in the shape created by the line segments
The
beginPath()
method is first used to tell the canvas that a new shape is
being drawn, which consists of line segments. The
moveTo()
and
lineTo()
meth-
ods are then used to move around the canvas and draw line segments. Lastly, the
closePath()
method is used to complete a line and connect the beginning and end-
ing points if the line is filled. For example, to create a triangle a path is begun, the draw-
ing point is moved, two lines are drawn, and the path is closed, filled, and outlined:
…
context.beginPath(); // start a new line
context.moveTo(50,50); // move to 50 pixels from
the left and top edge of the canvas
context.lineTo(150,50); // draw a line to 150 and 50
pixels from the left and top edge
context.lineTo(100,150); // draw a line to 100 and
150 pixels from the left and top edge
context.closePath(); // close the line
context.fill(); // fill the shape formed by
the line with the fill style color
context.stroke();
// outline the line with the
stroke style color
…
Used in place of the rectangle drawing code earlier, this results in the triangle shown
in
Figure 7-8
.
Search WWH ::
Custom Search