Html5 uses canvas to draw hollow circles and solid circles, html5canvas

Html5 uses canvas to draw hollow circles and solid circles, html5canvas
This article describes how to use canvas to draw hollow circles and solid circles in html5. For more information, see

Here we will share with you a practical exercise that draws hollow circles and solid circles when learning canvas, which is very simple.

<Canvas id = "canvas" width = "500" height = "500" style = "background-color: yellow;"> </canvas>
 

The Code is as follows:
Var canvas = document. getElementById ("canvas ");
Var cxt = canvas. getContext ("2d ");
// Draw a hollow circle
Cxt. beginPath ();
Cxt. arc (200,200, 50, 0, 360, false );
Cxt. lineWidth = 5;
Cxt. strokeStyle = "green ";
Cxt. stroke (); // draw a hollow circle
Cxt. closePath ();
// Draw a solid circle
Cxt. beginPath ();
Cxt. arc (200,100, 50, 0, 360, false );
Cxt. fillStyle = "red"; // fill color, black by default
Cxt. fill (); // draw a solid circle
Cxt. closePath ();
// A combination of hollow and solid
Cxt. beginPath ();
Cxt. arc (300,300, 50, 0, 360, false );
Cxt. fillStyle = "red ";
Cxt. fill ();
Cxt. strokeStyle = "green ";
Cxt. stroke ();
Cxt. closePath ();