In this recipe, we'll embrace our inner hippie by creating a field of colorful flowers.
Follow these steps to draw randomized flowers all over the canvas:
Define the constructor of a
Flower
object:// define Flower constructor function Flower(context, centerX, centerY, radius, numPetals, color){ this.context = context; this.centerX = centerX; this.centerY = centerY; this.radius = radius; this.numPetals = numPetals; this.color = color; }
Define a
draw
method of theFlower
object that creates flower petals with afor
loop and then draws a yellow center:// Define Flower draw method Flower.prototype.draw = function(){ var context = this.context; context.beginPath(); // draw petals for (var n = 0; n < this.numPetals; n++) { var theta1 = ((Math.PI * 2) / this.numPetals) * (n + 1); var theta2 = ((Math.PI * 2) / this.numPetals) * (n); var x1 = (this...