HTML and CSS Reference
In-Depth Information
function Arrow () {
this.x = 0;
this.y = 0;
this.color = "#ffff00";
this.rotation = 0;
}
Arrow.prototype.draw = function (context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.lineWidth = 2;
context.fillStyle = this.color;
context.beginPath();
context.moveTo(-50, -25);
context.lineTo(0, -25);
context.lineTo(0, -50);
context.lineTo(50, 0);
context.lineTo(0, 50);
context.lineTo(0, 25);
context.lineTo(-50, 25);
context.lineTo(-50, -25);
context.closePath();
context.fill();
context.stroke();
context.restore();
};
The
draw(context)
method uses the canvas drawing API (which we discuss in Chapter 4) to draw an
arrow using the passed canvas context parameter. Now, whenever you need an arrow object, you just call
new Arrow()
. You can see the result in Figure 3-15. When drawing any content made to rotate like this,
make sure that it is “pointing” to the correct, or positive x axis, because this is how it will look when rotated
to 0 degrees.
Figure 3-15.
The arrow drawn with the canvas drawing API
You create an instance of the
Arrow
class, placing it in the center of the canvas element and having it
point at the mouse (see Figure 3-16).
