Here you will complete the same task as in the dartboard exercise, using the value of i instead of an outside variable.

Question

Make sure your dartboard:

Consists of 4 concentric circles
Has the center circle placed in the middle of the canvas with a radius of 25
Has three circles surrounding the middle, that each increase in radius by 25 pixels
Use the value of i to control the radius of the circles
Hint: Determine how to use extended for loop parameters to produce the exact radius values you need (25, 50, 75, 100).

Answer 1

To create a dartboard with 4 concentric circles where the radius increases by 25 pixels, you can use a loop to draw each circle. You'll want to use the value of i to control the radius of each circle within a for loop.

Here's a code snippet demonstrating how to achieve this, assuming you are using a programming environment that supports drawing on a canvas, such as JavaScript with HTML5 Canvas.

// Setup the canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Center position
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

// Draw circles
for (let i = 1; i <= 4; i++) {
    // Calculate the radius (25, 50, 75, 100)
    const radius = i * 25;

    // Draw the circle
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
    ctx.strokeStyle = 'black'; // Circle color
    ctx.lineWidth = 2; // Circle width
    ctx.stroke();
}

Explanation of the Code:

1. Canvas Setup:

   • It starts by selecting a canvas element from the HTML (assumed to have an ID of myCanvas).
   • The getContext('2d') method is called to get the 2D rendering context.

2. Calculating Center Position:

   • The center of the canvas is calculated to help position the circles in the middle.

3. Drawing Circles:

   • A for loop runs from 1 to 4 (inclusive), where i takes values 1, 2, 3, and 4.
   • The radius for each circle is calculated as i * 25, resulting in the radii of 25, 50, 75, and 100 respectively.

4. Creating Each Circle:

   • For each iteration, a new path is started with ctx.beginPath().
   • The circle is drawn using ctx.arc() with the computed radius.
   • After defining the properties such as stroke style and line width, the circle is drawn with ctx.stroke().

Make sure to have a canvas element in your HTML:

<canvas id="myCanvas" width="200" height="200"></canvas>

This code, when run inside a JavaScript environment with the appropriate HTML, will create a dartboard of concentric circles on the canvas. Each circle will be outlined, with their radii increasing by 25 pixels from the center outwards.