canvas旋转缩放 

<!DOCTYPE html>
<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>
</head>

<body>
    <canvas id="canvas" width="600" height="600">
        您的浏览器不支持canvas，请更换谷歌浏览器
    </canvas>
    <script>
        let num = 0
        let scale = 0
        if (canvas.getContext) {
            canvas.style.backgroundColor = 'orange'
            const ctx = canvas.getContext("2d")
            ctx.translate(150, 150)
            setInterval(() => {
                num++
                scale += 0.01
                if (scale >= 2) {
                    scale = -scale
                }
                ctx.clearRect(-150, -150, canvas.width, canvas.height)
                ctx.save()
                ctx.rotate(num * Math.PI / 180)
                ctx.scale(scale, scale)
                ctx.fillRect(-50, -50, 100, 100)
                ctx.restore()
            }, 1000 / 60);

        }
    </script>
</body>

</html>

canvas中的变形之缩放，scale 可以被允许是负值。负值被称为对称镜像值。只要绝对值大于1的，他们的效果都是放大。小于1的都是缩小

posted @ 2021-11-24 21:15  走我们钓鱼去  阅读(107)  评论(0)    收藏  举报