getElementById(???myCanvas??™);
var context = canvas.getContext(???2d??™);
// Empty triangle
context.beginPath();
context.moveTo(10,10);
context.lineTo(10,75);
context.lineTo(100,40);
context.lineTo(10,10);
context.stroke();
context.closePath();
// Filled triangle
context.beginPath();
context.moveTo(110,10);
context.lineTo(110,75);
context.lineTo(200,40);
context.lineTo(110,10);
context.fill();
// Outer rectangle
context.strokeRect(3,3,205,80);
}
Figure 6-2 shows the results.
If you are new to canvas programming, drawing complex shapes on the canvas can take some getting
used to. You may find it helpful initially to go low tech and use a piece of graph paper to sketch out the
shapes you are trying to draw and calculate the x,y coordinates using the paper grid.
The JavaScript canvas enables you to go well beyond drawing with straight lines, however. You can use
the following methods to create more advanced curves and shapes:
??‘ arc(x, y, radius, startAngle, endAngle, clockwise) adds an arc to the current subpath
using a radius and specified angles (measured in radians).
??‘ arcTo(x1, y1, x2, y2, radius) adds an arc of a circle to the current subpath by using a
radius and tangent points.
??‘ quadratricCurveTo(cpx, cpy, x, y) adds a quadratic Bezier curve to the current subpath.
Pages:
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161