This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging

Method: Scale (x, y) The coordinate system can be scaled in addition to moving and rotating. The scale method is used, which has two parameters, respectively identifying the scaling ratio of the horizontal and vertical axes. 1 is the original size, greater than 1 is amplification, and less than 1 is reduction. Example:

<! 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" height="600" width="600">Browsers do not support Canvas</canvas>
    <script>
        const canvas = document.querySelector('#c2d');
        if(canvas.getContext) {
            const ctx = canvas.getContext('2d');
            
            ctx.fillText('Love my China'.10.50);

            ctx.scale(2.2);

            ctx.translate(50.50);

            ctx.fillText('Love my China'.10.50);
        }
    </script>
</body>
</html>
Copy the code

The second time you fill a text, the x and y axes are increased by two times, so the size of the text increases accordingly.

If my blog is helpful to you, if you like my blog content, please “like” “comment” “collection” one key three! I heard that 👉 praise 👈 people will not be too bad luck, every day will be full of vitality oh hey hey!! ❤️ ❤️ ❤️ Your support is what keeps me going. Don’t forget to follow me at 👉 and 👈!

Personal wechat: IOTzzh Public account: Front-end Wechat personal website: www.iotzzh.com