“This is the 19th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

🚧 Draw some common basic graphics ~

  • You know, no matter how complex a graph is, it’s made up of a combination of basic shapes.
  • So, let’s start by looking at how to draw various common basic shapes.
  • This will be handy when designing projects that need to use Canvas!

🚓 (1) Draw a straight line

  1. Specify the starting (x,y) coordinates;
  2. Specified thickness;
  3. Specify the color.

 

Note: Use CSS to locate the Canvas element and give it a prominent border style for viewing below!

1️ discount code:

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		  /* Set canvas canvas style -- canvas border width 1px; Solid lines; Red * /
			#myCanvas{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="300" height="250"></canvas>
	</body>
	<script type="text/javascript">
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		
		// 1. First, position the brush at the starting point;
		ctx.moveTo(50.50);
		// 2. Then, connect a line from the current position to the destination coordinate (note: no real line is drawn at this point!).
		ctx.lineTo(100.50);
		ctx.strokeStyle = "blue";    // Line color
		ctx.lineWidth = "5";	     // The thickness of the line
		// 3. Finally, draw a line, the function is to stroke ———— this sentence is the real draw a line!
		ctx.stroke();		   	     // You can comment this line and see the effect.
		
</script>
</html>
Copy the code

2️ realisation effect:

🚑 (2) Draw a broken line

  1. Specifies the shape at the fold point.
  2. Specifies the shape of the end of the line.

1️ discount code:

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#myCanvas{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="300" height="250"></canvas>
	</body>
	<script type="text/javascript">
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		
		// 1. First, position the brush at the starting point
		ctx.moveTo(50.50);
		// 2. Then, connect a line from the current position to the key coordinate.
		ctx.lineTo(100.50);
		ctx.lineTo(60.80);
		
		// 3. Specify a line segment endpoint shape ———— round: round; A square B. Butt: the default
		ctx.lineCap = "round";  	
		  
		// 4. Specify the shape of the intersection point (polyline point) ———— round: Miter: default; Bevel: Cut a part of it;
		ctx.lineJoin = "round";   
		
		ctx.strokeStyle = "blue";  // Line color
		ctx.lineWidth = "5";	   // The thickness of the line
		
		// 5. Finally, draw a line, the function is to stroke ———— this line is the real draw line!
		ctx.stroke();			  
		
</script>
</html>
Copy the code

Try changing lineCap and lineJoin multiple times to see what happens.

2️ realisation effect:

🚔 (3) Draw rectangles and circles

Try drawing solid and hollow!

Draw multiple graphs on the same drawing:

When drawing on the same canvas, that is, on the same canvas, the position of the brush is the end point of the previous drawing!

The problem is that repositioning the brush is too much trouble!

Solution – So use the.stroke() method after a drawing to draw this graph; And use the method. BeginPath () to open a new drawing, reposition the brush can!

1️ discount code:

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Draw squares, draw circles</title>
		
		<style type="text/css">
			#c1{
				border:1px solid blue;            
			}
		</style>
		
	</head>
	<body>
		<canvas id="c1" width="1300" height="700"></canvas>
	</body>
	
	<script type="text/javascript">
		var c = document.getElementById("c1");
		var ctx = c.getContext("2d");
		
		//1. Draw a hollow rectangle
		ctx.strokeStyle = "blue";
		ctx.lineWidth = 5;					// Line thickness
		ctx.strokeRect(50.50.250.250);	// Parameters: upper left x,y coordinates, x,y direction length
		
		
		//2. Draw a solid rectangle
		ctx.fillStyle = "#DFFF4A";     // Specify the fill color
		ctx.fillRect(350.50.100.100);
		
		
		//3. Draw a rectangle with both stroke and fill
		// The first method: draw a hollow rectangle and then draw a solid rectangle inside it
		ctx.lineWidth = 20;
		ctx.strokeRect(500.50.100.100);
		ctx.fillRect(500.50.100.100);
		
		// The second method:.rect() draws a hollow rectangle, then.fill()
		ctx.rect(650.50.100.100);
		ctx.stroke();
		ctx.fill()
		
		
		//4. Draw the filled circle
		ctx.beginPath();
		ctx.lineWidth = 3;
		// parameters: 150,500 is the center of the circle, 80 is the radius, 0 is the starting Angle of the arc, math. PI/2 is the end Angle of the arc, true is counterclockwise; False is clockwise.
		ctx.arc(150.500.80.0.Math.PI*2.true);
		ctx.stroke();
		ctx.fill();			// Note: the padding styles used are set above!
		
		
		// 5. Draw hollow circles
		ctx.beginPath();
		ctx.lineWidth = 3;
		ctx.arc(400.500.80.0.Math.PI*2.true);
		ctx.stroke();

	</script>
</html>
Copy the code

2️ realisation effect:

🔆 In The End!

Start now, stick to it, a little progress a day, in the near future, you will thank you for your efforts!

This blogger will continue to update the basic column of crawler and crawler combat column, carefully read this article friends, you can like the collection and comment on your feelings after reading. And can follow this blogger, read more crawler in the days ahead!

If there are mistakes or inappropriate words can be pointed out in the comment area, thank you! If reprint this article please contact me for my consent, and mark the source and the name of the blogger, thank you!