Html5 using canvas to draw hollow circles and solid circles _ html5 tutorial skills-

This article mainly introduces the use of canvas to draw hollow circles and solid circles in html5, if you need it, you can refer to the exercises for drawing hollow circles and solid circles when learning canvas, which is very simple.

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 ();