HTML and CSS Reference
In-Depth Information
Figure 4-4. Multiple closed curves
Additional curves
Besides the context.quadraticCurveTo method we've been using, there are a few other methods for
drawing curves, each with their own characteristic shape:
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) : Adds a point to the current path
connected by a cubic Bézier curve with the two control points.
arcTo(cp1x, cp1y, cp2x, cp2y, radius) : Adds an arc to the path using two control points
and radius, connected to the previous point by a straight line.
arc(x, y, radius, startAngle, endAngle [, antiClockwise]) : Adds an arc to the path
described by the circumference of a circle, from the start angle to end angle, in the given direction
(defaulting to clockwise), connected to the previous point by a straight line.
These methods are not used much in this topic; however, context.arc shows up throughout the example
code because it's an easy way to draw a circle. For example, this is how to draw a circle at point 100, 100
with a radius of 50:
context.beginPath();
context.arc(100, 100, 50, 0, (Math.PI * 2), true);
context.closePath();
context.stroke();
Creating shapes with fill
Now that we've drawn several paths using lines and curves, we use them to create shapes. The
context.fill() method fills in the sub-paths with the current fill style.
The context.fillStyle property, like context.strokeStyle , is set using a CSS-style color string in
hexadecimal or RGB format. The default is black, or "#000000" . If you want to use a transparent color,
recall that you need to format it as a proper RGBA string.
 
Search WWH ::




Custom Search