The CANVAS element of H5 uses JavaScript to draw images on web pages.

A canvas is a rectangular area that you can control every pixel of.

Canvas has a variety of ways to draw paths, rectangles, circles, characters and add images

Create a Canvas

<canvas id="myCanvas" width="400px" height="400px"></canvas>
Copy the code

Basic usage

(1) Get Canvas –> get canvas, through document.getelementByid () and other methods to get canvas

var canvas = document.getElementById("myCanvas");
/ / or
var canvas = document.querySelector('canvas');
Copy the code

(2) Get the context –> Get the brush. The graph context is an object that encapsulates many drawing functions, and the parameter can only be “2D”.

var context = canvas.getContext('2d');
Copy the code

(3) Define the fill style

context.fillStyle = 'red';
Copy the code

(4) Draw filling graph

context.fillStyle(10.10.100.100)
// The first parameter is the starting position of the X-axis, the second parameter is the starting position of the Y-axis, the third parameter is the width of the drawing, and the fourth parameter is the height of the drawing
Copy the code

Example 1 — Draw the fill rectangle

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var canvas=document.querySelector('canvas');
            var context=canvas.getContext('2d');
            context.fillStyle='red';
            context.fillRect(0.0.200.200);
            // Clear some areas
            context.clearRect(0.0.50.50);
        }
    </script>
</head>
<body>
    <canvas width="400px" height="400px"></canvas>
</body>
</html>
Copy the code

Example 2– Draw an outline rectangle

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var canvas=document.querySelector('canvas');
            var context=canvas.getContext('2d');
            context.strokeStyle='pink';
            // Set the width of the outline rectangle
            context.lineWidth = 18;
            // Draw the outline rectangle
            context.strokeRect(10.10.200.200);   // if the origin is set to (0,0), two edges of the line width cannot be shown because the origin is in the middle of the line width
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400px" height="400px"></canvas>
</body>
</html>
Copy the code

Example 3– Draw the fill circle

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
        var canvas=document.querySelector('canvas');
        var context=canvas.getContext('2d');
        context.beginPath();
        // X-axis start position Y-axis Start position Circle radius Start Radian End Radian Whether the direction of the circle is counterclockwise
        context.arc(100.100.50.0.Math.PI,true);
        // Modify the fill style
        context.lineTo(100.100);
        // End the path
        context.closePath();
        context.fillStyle='cyan';
        context.fill();
        }
    </script>
</head>
<body>
    <canvas width="400px" height="400px"></canvas>
</body>
</html>
Copy the code

Example 4- Draw an outline circle

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
        // Get the canvas
        var canvas=document.querySelector('canvas');
        var context=canvas.getContext('2d');
        context.beginPath();
        // X-axis start position Y-axis Start position Circle radius Start Radian End Radian Whether the direction of the circle is counterclockwise
        context.arc(100.100.50.0.Math.PI);
        context.closePath();
        // Modify the outline style
        context.strokeStyle='red';
        context.stroke();
        }
    </script>
</head>
<body>
    <canvas width="400px" height="400px"></canvas>
</body>
</html>
Copy the code

Example 5– Circle movement

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            var canvas = document.querySelector('canvas');
            var context = canvas.getContext('2d');
            var bubble = {
                x: 100.y: 100.r: 50.color: 'pink'
            }
            // Encapsulate the drawing method
            draw(bubble);
            setInterval(function () {
                // Clear the canvas
                context.clearRect(0.0.400.400);
                move(bubble)
            }, 200)
            move(bubble);
            function draw(bublle) {
                context.beginPath();
                context.arc(bubble.x, bubble.y, bubble.r, 0.Math.PI * 2);
                // Draw the fill circle
                context.fillStyle = bubble.color;
                context.fill();
            }
            // Circle move method
            function move(bubble){
                bubble.x+=5;
                bubble.y+=5; draw(bubble); }}</script>
</head>
<body>
    <canvas width="400px" height="400px"></canvas>
</body>
</html>
Copy the code