HTML5 Canvas component to draw Taiji patterns

I. Implementation ideas:
The implementation principle is to use the path function provided by the Canvas component of html5.
Make two semi-circles, black and white respectively to form a circle. After the painting is complete, draw a black circle respectively.
And the white circle within the drawn black and white circle, the radius is exactly half of the black and white circle. Finally
The black and white circles are filled with white points and black points respectively. The radius is about 10 pixels.
 
The effect of the second program is as follows:


 
Three key procedures:
The program that draws the semi-circle. 200,200 indicates that the Center Coordinate is drawn, and the third parameter 150 indicates the radius of the drawn circle.
The fourth parameter indicates the start angle, the fifth parameter indicates the end angle, and the last parameter indicates whether the start angle is clockwise or counterclockwise.
The code for drawing a white circle is as follows:
 
Ctx. fillStyle = "# fff ";
Ctx. beginPath ();
Ctx. arc (200,200,150, 1.5 * Math. PI, Math. PI/2, false );
Ctx. closePath ();
Ctx. fill ();
 
The code for creating a black half circle is as follows: www.2cto.com
 
Ctx. fillStyle = "#000 ";
Ctx. beginPath ();
Ctx. arc (200,200,150, Math. PI/2, 1.5 * Math. PI, false );
Ctx. closePath ();
Ctx. fill ();
 
The code for adding text to the Taiji pattern uses transparent processing, and the Canvas global transparency setting function
As follows:
 
// Set transparency value
Ctx. globalAlpha = 0.2;
 
The code for drawing text is as follows:
 
// Draw semi transparent text
Ctx. fillStyle = "# f00 ";
Ctx. font = "32pt Arial ";
Ctx. fillText ("Hello", 220,200 );
Ctx. fillText ("Canvas", 100,250 );
 
The complete JavaScript code of the program is as follows:
 
Window. onload = function (){
Var cvs = document. getElementById ("canvas-path ");
Ctx = cvs. getContext ("2d ");
 
// Create circle and radius = 150
// Start point (x, y), radius, start angle, end angle, boolean antiClockWise
Ctx. fillStyle = "# fff ";
Ctx. beginPath ();
Ctx. arc (200,200,150, 1.5 * Math. PI, Math. PI/2, false );
Ctx. closePath ();
Ctx. fill ();
Ctx. fillStyle = "#000 ";
Ctx. beginPath ();
Ctx. arc (200,200,150, Math. PI/2, 1.5 * Math. PI, false );
Ctx. closePath ();
Ctx. fill ();

// Draw sub circle
// Start point (x, y), radius, start angle, end angle, boolean antiClockWise
Ctx. fillStyle = "#000 ";
Ctx. beginPath ();
Ctx. arc (200,275, 75, 0, Math. PI * 2, false );
Ctx. closePath ();
Ctx. fill ();
Ctx. fillStyle = "# fff ";
Ctx. beginPath ();
Ctx. arc (200,125, 75, 0, Math. PI * 2, false );
Ctx. closePath ();
Ctx. fill ();

// Fill black and white point
Ctx. fillStyle = "# fff ";
Ctx. beginPath ();
Ctx. arc (200,275, 10, 0, Math. PI * 2, false );
Ctx. closePath ();
Ctx. fill ();
Ctx. fillStyle = "#000 ";
Ctx. beginPath ();
Ctx. arc (200,125, 10, 0, Math. PI * 2, false );
Ctx. closePath ();
Ctx. fill ();

// Set transparency value
Ctx. globalAlpha = 0.2;

// Draw semi transparent text
Ctx. fillStyle = "# f00 ";
Ctx. font = "32pt Arial ";
Ctx. fillText ("Hello", 220,200 );
Ctx. fillText ("Canvas", 100,250 );
Ctx. globalAlpha = 1.0;
Ctx. shadowOffsetX = 2;
Ctx. shadowOffsetY = 2;
Ctx. shadowBlur = 2;
Ctx. shadowColor = "rgba (0, 0, zero, 0.5 )";
Ctx. fillStyle = "#000 ";
Ctx. font = "20px Times New Roman ";
Ctx. fillText ("-created by gloomyfish", 100, 30 );
};
 
Why should I add my name to the illustration, because I found that the article was not marked out when it was reproduced?

From stray fish