Use of the arc function of the canvas object-, canvasarc

Use of the arc function of the canvas object-, canvasarc

(-1) Preface

I use chrome49.

<Canvas id = "lol" height = "300"> </canvas>

(1) detailed introduction

The arc function is used to show the part of the circle.

Context. arc (100,100, 50, Math. PI/6, Math. PI * 2, false );

Parameter 1 and 2 Specify the center of the circle,

3. Specify the radius,

4. Specify the start angle and 5. Specify the end angle.

6. If the parameter is set to true, values are drawn clockwise if the parameter is set to false. If the parameter is not set to false, values are drawn clockwise.

A. Quadrant Distribution

 

Example1

When the circle is determined, the part of the circle is determined by the starting angle, ending angle, and painting method.

Var context = lol. getContext ("2d ");

Context. beginPath ();

// Context. arc (150,150,100, 0, Math. PI/3, true); // 1

Context. arc (150,150,100, 0, Math. PI/3, false) // 2

Context. stroke ();

Context. closePath ();

Context. beginPath ();

Context. strokeStyle = "red ";

Context. moveTo (0,150 );

Context. lineTo (300,150 );

Context. moveTo (150,0 );

Context. lineTo (150,300 );

Context. closePath ();

Context. stroke ();

(1) (2)

 

Example2

If sub-path A exists before calling the arc method, A line is taken from the end of A to connect the starting point of the arc shown by the arc method.

Var context = lol. getContext ("2d ");

Context. beginPath ();

Var value = 0;

For (var I = 0; I <4; I ++)

{

Context. arc (150,150, 60, value, value + Math. PI/4, false );

// Change false to true. You will see more interesting information.

Value + = Math. PI/2;

}

Context. closePath ();

Context. stroke ();

Context. beginPath ();

Context. strokeStyle = "red ";

Context. moveTo (0,150 );

Context. lineTo (300,150 );

Context. moveTo (150,0 );

Context. lineTo (150,300 );

Context. closePath ();

Context. stroke ();

 

The fifth parameter is false. The fifth parameter is true.