Details of the graphic and text code for drawing Tai Chi patterns using the HTML5 Canvas component-H5 Tutorial-php.cn

Details of the graphic and text code for drawing Tai Chi patterns using the HTML5 Canvas component

黄舟

Release： 2017-03-03 16:28:05

Original

2279 people have browsed it

Implementation idea:

The implementation principle is mainly to use the path function provided by the Canvas component of HTML5 to draw a circle. First, draw two

Two semicircles, respectively black and white, form a circle. After the drawing is completed, draw a black

and a white circle respectively. Within the drawn black and white circle, the radius is exactly half of the large black and white circle. Finally, fill the two drawn black and white circles with white and black dots respectively, with a radius of about 10pixels.

The effect of the second program is as follows:

## Analysis of the three key programs:

The program to draw a semicircle, where 200, 200 represents the coordinates of the center point to start drawing, and the third parameter 150 represents the radius of the circle drawn

The fourth parameter represents the starting angle , the fifth parameter indicates the end angle, and the last parameter indicates whether it is clockwise or counterclockwise.

The code for drawing a white semicircle 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();

Copy after login

Draw The code for the black semicircle is as follows:

		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false);
		ctx.closePath();
		ctx.fill();

Copy after login

The code for adding text in the Tai Chi pattern uses transparency processing. The Canvas global transparency setting function

is as follows:

		// set transparency value  
		ctx.globalAlpha = 0.2;

Copy after login

Draw The code of the 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);

Copy after login

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, 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, 0, 0.5)";  
		ctx.fillStyle = "#000";
		ctx.font = "20px Times New Roman";
		ctx.fillText("-created by gloomyfish", 100, 30);
	};

Copy after login

Why should I add my name to the illustration, because when I found that the article was reprinted It was not marked!

The above is the details of the graphic and text code of the HTML5 Canvas component for drawing Tai Chi patterns. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!