This is the third day of my participation in the August Text Challenge.More challenges in August

Moving origin

Translate (x, y) : translate (x, y) : translate (x, y

Rotating coordinate system

Method: Rotate (Angle) : the integer is counterclockwise and the negative number is clockwise.

The instance

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c2d" width="500" height="500">Do not support the canvas</canvas>
    <script>
        const canvas = document.querySelector('#c2d');
        if(canvas.getContext) {
            const ctx = canvas.getContext('2d');
            ctx.fillRect(0.0.10.30);

            ctx.translate(10.30);
            ctx.fillRect(0.0.10.30);

            ctx.translate(10.30);
            ctx.rotate(-Math.PI * 1/2);
            ctx.fillStyle='red';
            ctx.fillRect(0.0.10.30);
        }
    </script>
</body>
</html>
Copy the code

If my blog is helpful to you, if you like my blog content, please “like” “comment” “favorites” one key three even oh! I heard that the people who like 👉 👈 will not be too bad, every day will be full of vitality oh hey hey!! ❤️ ❤️ ❤️ Everyone’s support is my motivation to keep going. Don’t forget to follow 👉 👈 after you like me!

Personal wechat: iotzzh Public account: front-end wechat personal website: www.iotzzh.com