Detailed explanation of the use of HTML canvas and page storage technology in JavaScript

1. JavaScript uses canvas in HTML

1. Canvas: A special area on the page for drawing graphics
2. The process of drawing graphics
(1) Create a canvas: Use the canvas tag in HTML5

<canvas id="id" width="width" height="height">
</canvas>

(2) Get the canvas in JavaScript

document.getElementById('id')

(3) Prepare the brush: context object (brush), also known as the drawing environment, is used to draw graphics on the canvas

 getContext('2d')

3. Drawing
(1) Draw a line:
A. Initial position, line endpoint (end point), stroke (line drawing)
B. 2D plane coordinate system: The upper left corner of the canvas is the coordinate origin (0,0). Extending to the right from the origin increases the x-axis, and extending downward increases the y-axis.
C. Line drawing process:
a. Determine the initial position (starting point): moveTo(x,y)
b. Determine the connection endpoint (end point): lineTo(x,y)
c. Stroke: stroke()
D. Line style
a. Line width: lineWidth = 'value', the default unit is pixels
b. Stroke color (line color): strokeStyle = 'color name or hexadecimal color value'
c. The shape of the endpoint: lineCap = 'shape'

• butt: Default value, no endpoint shape, showing a straight square edge
• round: round endpoint
• square: square endpoint

E. Line path: No matter how many connection endpoints are added in the same canvas, there is only one path.
a. Start a new path: beginPath()
b. Close the path: closePath()
c. Path filling: fill()
Example

ontext.strokeStyle = 'red' //stroke color context.moveTo(10,10); //starting position context.lineTo(10,100); //connection endpoint (vertical line)
context.lineTo(100,100); //Connection endpoint (horizontal line)
context.closePath();//Close the pathcontext.stroke();//Strokecontext.fill(); //Fill

(2) Draw a circle: arc(x, y, r, start angle, end angle, direction)
x, y: Coordinates of the center of the circle r: Radius of the circle Start angle: Can be pi End angle: Same as the start angle Direction: Drawing direction (clockwise, counterclockwise), true means counterclockwise, false means clockwise (default)
Example

var canvas = document.getElementById('cavs');
var context = canvas.getContext('2d');
context.arc(150,80,50,0,2.0*Math.PI)
context.stroke()

2. Page Storage Technology

Session tracking technology, the HTTP protocol is a stateless protocol, the server must use session tracking technology to determine the client sending the request
1. Original storage method (session tracking technology): stored via cookies
(1) Generated by the server and stored in the client's browser buffer
(2) Disadvantages of Cookie Method
A. Cookies are attached to HTTP messages, which invisibly increases data traffic.
B. Cookies are transmitted in plain text in HTTP messages, so they are not very secure and can be easily stolen.
C. Cookies are stored in the browser and can be tampered with. The server must verify the legitimacy of the data after receiving it.
D. Browsers limit the number and size of cookies (usually limited to 50, each no larger than 4KB), which is not enough for complex storage requirements.
2. Html5 page storage method (web storage)
(1) localStorage: persistent local storage. It is stored in a key-value format. If the user or script does not clear it, it will be stored on the local computer.
(2)sessionStorage:
A. session: session. In web development, a session is from the time a browser is opened to the time it is closed; the session ends when the browser is closed.
B. sessionStorage: Data is stored in the browser's memory. The data in the memory will be automatically cleared when the browser is closed. Its life cycle is the same as the session life cycle
(3) The difference between localStorage and sessionStorage
A. Different life cycles: localStorage is permanent, while sessionStorage has the same life cycle as the session, and the data disappears when the session ends.
B. Different storage locations: localStorage is stored on the hard disk, sessionStorage is stored in the browser memory (browser cache)

Example: Drawing a stick figure using canvas

<body>
	<canvas id="cas" width="1000" height="1000"></canvas>
</body>
</html>
<script>
	var cas = document.getElementById('cas');
	var context = cas.getContext('2d');
	//Draw the head context.arc(400,100,30,0,2*Math.PI);
	context.lineWidth='5';
	context.stroke();
	//Draw the torso context.beginPath();
	context.moveTo(400,130);
	context.lineTo(400,140);
	context.lineWidth='5';
	context.stroke();
	context.beginPath();
	context.moveTo(400,140);
	context.lineTo(400,260);
	context.lineWidth='25';
	context.stroke();
	//Draw the folder context.beginPath();
	context.moveTo(360,200);
	context.lineTo(440,200);
	context.lineTo(440,250);
	context.lineTo(360,250);
	context.closePath();
	context.fillStyle='#fff';
	context.fill();
	context.lineWidth='2';
	context.stroke();
	//Draw the arm context.beginPath();
	context.moveTo(400,140);
	context.lineTo(440,200);
	context.lineTo(400,240);
	context.lineWidth='10';
	context.stroke();
	context.beginPath();
	context.arc(400,240,10,0,2*Math.PI);
	context.fillStyle='#000';
	context.fill();
	//Draw the legs context.beginPath();
	context.moveTo(380,400);
	context.lineTo(400,260);
	context.lineTo(420,400);
	context.lineTo(400,240);
	context.lineWidth='10';
	context.stroke();	
	context.beginPath();
	context.arc(365,400,15,0,1*Math.PI,true);
	context.closePath();
	context.lineWidth='5';
	context.stroke();
	context.beginPath();
	context.arc(405,400,15,0,1*Math.PI,true);
	context.closePath();
	context.lineWidth='5';
	context.stroke();
</script>

The effect is as shown: You can draw various shapes you like by modifying the parameters

This is the end of this article about the use of html canvas and page storage technology in JavaScript. For more relevant js html canvas content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!