Canvas basic knowledge and simple graph drawing

This is the first day of my participation in Gwen Challenge

Concept:

H5 added canvas 2D drawing function in HTML:

Canvas is an HTML tag
Canvas can be understood as a canvas
We need js to draw the graph in the canvas

<! -- Canvas default width: 300px height: 150px-->
<cavnas id="canvas" width="700" height="700"></canvas>

<script>
		const canvas = document.querySelector('#canvas');
  	 // Get the brush
  	const ctx = canvas.selector('2d')
</script>
Copy the code

How to set the canvas size and size limit

Sets the width height property of the Canvas DOM element. Canvas size should not be too large and should be controlled within 4000 as far as possible. The specific limits of Canvas vary with browser and platform. Note: Do not use CSS to set the canvas size. Setting the size of the canvas in CSS can cause strange behavior such as stretching, trimming, and so on.

Canvas context object

How do I get a Canvas context object

Method to get a context object: Canvas.getContext (‘ 2d ‘)

<canvas id="canvas" width="700" height="700">Are not compatible</canvas>
<script>
    /* Get canvas canvas */
    const canvas=document.getElementById('canvas');

    /* Get the brush */
    const ctx=canvas.getContext('2d');

    /* Red fill rectangle */
    ctx.fillStyle='red';
    ctx.fillRect(20.20.300.200);
</script>
Copy the code

Once you’ve got the context object, how do you draw with it?

There are three aspects to consider when using a brush to draw on a canvas:

color

The shape of

The drawing method

compatibility

Canvas is compatible with IE9 and above

Steps for canvas drawing

Build a Canvas.
Get the context object, the brush, from the Canvas canvas.
Set the brush color.
Sets the shape of the graph.
Draw graphics.

Canvas Coordinate system and grid of canvas?

Canvas coordinate system is a two-dimensional cartesian coordinate system composed of x axis and y axis.

The horizontal axis in the Canvas coordinate system is the X-axis, and the farther to the right, the greater the X-axis. The vertical axis is the Y-axis, and it gets bigger as you go down.

The Canvas coordinate system is based on the width and height of pixels. The grid on the right is the 4 grids, each grid is a pixel, and the pixels have RGBA data. The number of pixels is equal to the width of the canvas times the height.

Rectangle drawing method

FillRect (x,y,w,h)

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
		// Set the width of the canvas to the width of the browser
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    / / brush
    const  ctx=canvas.getContext('2d');

    /* Fill color */
    ctx.fillStyle='red';

    /* fillRect(x,y,w,h)*/
    ctx.fillRect(50.50.400.200);
</script>
Copy the code

Stroke rectangle method: strokeRect(x, Y, W,h)

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
		// Set the width of the canvas to the width of the browser
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    / / brush
    const  ctx=canvas.getContext('2d');

		// Stroke color, black by default
    // ctx.strokeStyle='maroon';

    StrokeRect (x,y,w,h)
    ctx.strokeRect(50.50.400.200);
</script>
Copy the code

ClearRect (x,y,w,h)

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    / / brush
    const  ctx=canvas.getContext('2d');

    /* Stroke width */
    ctx.lineWidth=20;

    /* Fill color */
    ctx.fillStyle='red';
    /* Stroke color */
    // ctx.strokeStyle='maroon';

    // * fillRect(x,y,w,h)*/
    ctx.fillRect(50.50.400.200);

    StrokeRect (x,y,w,h)*/
    ctx.strokeRect(50.50.400.200);

    ClearRect (x,y,w,h)*/
    ctx.clearRect(50.50.400.200);

</script>
Copy the code

Steps to draw paths

Start creating a path: beginPath()

Add a subpath to a path collection:

[moveTo(x,y); shape; closePath() optional,

moveTo(x,y); Shape; ClosePath (optional),

moveTo(x,y); Shape; ClosePath () Optional,]

Display paths: Fill (), stroke()

The shape of the subpath

Line: lineTo (x, y);

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    / / brush
    const  ctx=canvas.getContext('2d');

    ctx.lineWidth=10;

    /* lineTo(x,y); * /
    ctx.beginPath();
    ctx.moveTo(50.100);
    ctx.lineTo(400.100);
    ctx.lineTo(400.300);
    ctx.closePath();
    ctx.stroke();
</script>
Copy the code

Arc: Arc (x,y, radius, start radian, end radian, direction)

Arc (x,y, Radius, Start radian, end radian, direction)

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    / / brush
    const  ctx=canvas.getContext('2d');

    ctx.lineWidth=10;

    /* * 360° = math. PI*2 * 1°= math. PI*2/360 * */

    /* Arc (x,y, radius, start radian, end radian, direction)*/
    ctx.beginPath();
    ctx.arc(
        300.300.50.0.Math.PI*3/2
    )
	
		// The beginning of the second circle
    ctx.moveTo(370.500);
    ctx.arc(
        300.500.70.0.Math.PI*2
    )
    ctx.stroke();
</script>
Copy the code

Tangent arc: arcTo(x1,y1,x2,y2, radius)

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    / / brush
    const  ctx=canvas.getContext('2d');

    ctx.lineWidth=10;

    /* arcTo(x1,y1,x2,y2, radius)*/
    ctx.beginPath();
    ctx.moveTo(50.100);
    ctx.lineTo(400.100);
    ctx.lineTo(400.300);
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = 'red'
    ctx.moveTo(50.100);
    ctx.arcTo(400.100.400.300.100);
    ctx.stroke();
</script>
Copy the code

Quadratic Bezier curve: Quadratic Bezier Curve (CPx1, CPY1,x, Y)

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    / / brush
    const  ctx=canvas.getContext('2d');

    ctx.lineWidth=10;

    QuadraCurverTo (cpx1,cpy1,x,y)*/
    ctx.beginPath();
    ctx.moveTo(50.100);
    ctx.quadraticCurveTo(200.60.400.300);
    ctx.stroke();
</script>
Copy the code

Cubic Bezier curve: bezierCurverTo(CPx1, CPY1, CPX2, CPY2,x,y)

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    / / brush
    const  ctx=canvas.getContext('2d');

    ctx.lineWidth=10;
		ctx.beginPath();
    ctx.moveTo(50.100);
		
		BezierCurverTo (cpx1,cpy1,cpx2,cpy2,x,y);
    ctx.bezierCurveTo(
        400.0.400.400.700.300);
    ctx.stroke();
</script>
Copy the code

Rectangle: the rect (x, y, w, h)

<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    / / brush
    const  ctx=canvas.getContext('2d');

    ctx.lineWidth=10;    
		// rect(x,y,w,h)
		ctx.beginPath();
    ctx.rect(50.50.100.100);
    ctx.rect(50.200.100.100);
    ctx.stroke();
</script>
Copy the code

Draw the principle

The concept of path and subpath

Path:

A path is a collection of subpaths.

A context object has only one path at a time. To draw a new path, empty the current path.

The beginPath() method empties the current path, that is, restores the path to its default state so that the path drawn later is not affected by the previous path.

Subpaths:

A subpath is a continuous line with a single starting point.

MoveTo (x,y) is a way to set the starting point of a path and also to create a new subpath.

The first sliver in a path does not need a starting point; its starting point defaults to the first point in the child path.

Note: When rect(x,y,w,h) draws a path, it has the moveTo() function.