canvas-01

Canvas drawing

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas drawing</title>
    <style>
        #canvas{
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="700">Are not compatible</canvas>
    <script>
        // Get the canvas
        const canvas = document.querySelector('#canvas');
        // canvas.width=300;
        // canvas.height=150;
        / / brush
        const ctx=canvas.getContext('2d');
        // Color is red
        ctx.fillStyle='red';
        // Shape rectangle
        ctx.fillRect(50.100.400.200);
    </script>
</body>
</html>
Copy the code

Canvas drawing rectangle

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

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

    / / fill color
    ctx.fillStyle='maroon';
    / / the stroke color
    ctx.strokeStyle='yellow';

    // Stroke width
    ctx.lineWidth=40;

    /* fillRect(x,y,w,h)*/
    / / CTX. FillRect (50,50,200,100);

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

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

Canvas drawing path

1. Draw lines and arcs

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

    BeginPath () 2. Add subpath to path set: [Shape; closePath() optional moveTo(x,y); shape; closePath() optional moveTo(x,y); shape; closePath() optional,] 3. Display paths: fill(), stroke() */

    /* lineTo(x,y); * /
    /*ctx.beginPath(); CTX. MoveTo (50, 50); CTX. LineTo (50, 400); CTX. LineTo (400200); ctx.closePath(); ctx.stroke(); * /

    /* Arc (x,y, radius, start radian, end radian, direction)*/
    /*ctx.beginPath(); CTX. Arc (400400200, 0, Math. PI * l); CTX. MoveTo (400 + 200600); CTX. Arc (400600200, 0, Math. PI * l); ctx.stroke(); * /

    /* arcTo(x1,y1,x2,y2, radius)*/
    /*ctx.beginPath(); CTX. MoveTo (50, 50); CTX. LineTo (50, 400); CTX. LineTo (400200); ctx.stroke(); * /

    ctx.beginPath();
    ctx.moveTo(50.50);
    ctx.arcTo(400.50.400.200.100);
    ctx.stroke();

</script>
Copy the code

Tangent arc diagramCopy the code

2. Quadratic and cubic Bezier curves and rectangles

<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    const  ctx=canvas.getContext('2d');
    
    QuadraCurverTo (cpx1,cpy1,x,y)*/
    /*ctx.beginPath(); CTX. MoveTo (50, 50); CTX. LineTo (50, 400); CTX. LineTo (400200); ctx.stroke(); * /

    /*ctx.beginPath(); CTX. MoveTo (50, 50); CTX. QuadraticCurveTo (400,50,400,200); ctx.stroke(); * /


    /* bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y)*/
    /*ctx.beginPath(); CTX. MoveTo (50, 50); CTX. LineTo (50, 400); CTX. LineTo (400200); CTX. LineTo (700200); ctx.stroke(); * /

    /*ctx.beginPath(); CTX. MoveTo (50, 50); CTX. BezierCurveTo (400,50, 400,200, 700,200); ctx.stroke(); * /

    Rect (x,y,w,h)*/
    ctx.beginPath();
    ctx.rect(50.50.400.200);
    ctx.rect(50.350.400.200);
    ctx.fill();

</script>
Copy the code

The robot

1. The brutal version

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The robot</title>
    <style>
        body{margin: 0;overflow: hidden; }#canvas{background: antiquewhite; }</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    // Canvas fills the window
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    / / brush
    const  ctx=canvas.getContext('2d');

    / / color
    / / fill color
    ctx.fillStyle='red';

    // Stroke width
    ctx.lineWidth=40;

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

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

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

    /* lineTo(x,y) */
    ctx.beginPath();
    ctx.moveTo(150.400);
    ctx.lineTo(350.400);
    ctx.stroke();

    /* Eye arc(x,y, radius, starting arc, ending arc, direction) */
    ctx.beginPath();
    ctx.arc(150.330.20.0.Math.PI*2);
    ctx.moveTo(350-20.340);
    ctx.arc(350.340.20.Math.PI,Math.PI*2);
    ctx.fill();

    /* bezierCurverTo(cpx1, CPy1, CPx2,cpy2,x,y) */
    ctx.beginPath();
    ctx.moveTo(50.50);
    ctx.bezierCurveTo(
        150.50.150.250.250.250
    );
    ctx.moveTo(450.50);
    ctx.bezierCurveTo(
        350.50.350.250.250.250
    );
    ctx.stroke();

</script>
</body>
</html>

Copy the code

2. Packaged versions

<script>
    const canvas=document.getElementById('canvas');
    // Canvas fills the window
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    / / brush
    const  ctx=canvas.getContext('2d');

    / / drawing
    function render(color='red'){
        / / color
        ctx.fillStyle=color;

        // Stroke width
        ctx.lineWidth=40;

        / / rectangle
        // Face rectangle
        ctx.fillRect(50.250.400.200);
        // Facial contours
        ctx.strokeRect(50.250.400.200);
        // Face erasure
        ctx.clearRect(50.300.400.60);

        / / path
        / / in a straight line
        ctx.beginPath();
        ctx.moveTo(150.400);
        ctx.lineTo(350.400);
        ctx.stroke();

        / / round
        ctx.beginPath();
        ctx.arc(150.330.20.0.Math.PI*2);
        ctx.fill();

        / / semicircle
        ctx.beginPath();
        ctx.arc(350.340.20, -Math.PI,0);
        ctx.fill();

        // Cubic Bezier curves
        ctx.beginPath();
        ctx.moveTo(50.50);
        ctx.bezierCurveTo(150.50.150.250.250.250);
        ctx.moveTo(450.50);
        ctx.bezierCurveTo(350.50.350.250.250.250);
        ctx.stroke();
    }

    let color='red';
    render(color);

    canvas.addEventListener('mousemove'.function(event){
        const {left,top}=canvas.getBoundingClientRect();
        const x=event.clientX-left;
        const y=event.clientY-top;
        let curColor='red';
        if(x>30&&x<470&&y>230&&y<470){
            curColor='black';
        }else{
            curColor='red';
        }
        if(color! ==curColor){ color=curColor;// Clear the canvas
            ctx.clearRect(0.0,canvas.width,canvas.height); render(color); }})</script>
Copy the code