canvas实例--动态缩放

变换实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height: 100%;
            overflow: hidden;
            background-color: #616161;
        }
        #test{
            background-color: white;
            position: absolute;
            left:0;
            top:0;
            right:0;
            bottom: 0;
            margin:auto;
        }
    </style>
</head>
<body>
<canvas id="test" height="500"width="500">
    <span>您的浏览器不支持canvas</span>
</canvas>
</body>
</html>
<script>
    var canvas=document.querySelector('#test');
    var flag=0;
    var scale=0;
    var flagScale=0;
    if(canvas.getContext){
        var ctx=canvas.getContext("2d");
        ctx.save();
        ctx.translate(150,150);
        ctx.beginPath();
        ctx.fillRect(-50,-50,100,100);
        ctx.restore();

        //不停的旋转,加一个定时器
        setInterval(function () {
            flag++;
            //将图形擦掉
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.save();
            ctx.translate(150,150);
            //旋转
            ctx.rotate(flag*Math.PI/180);

//首先，将尺寸放大+1，直到加到100；然后缩小-1
            if(scale===100){
                flagScale=-1;
            }else if(scale===0){
                flagScale=1;
            }
            scale+=flagScale;
            ctx.scale(scale/50,scale/50);

            ctx.beginPath();
            ctx.fillRect(-50,-50,100,100);
            ctx.restore();
        },10)
    }
</script>
posted @ 2020-08-18 12:06  花未眠0619  阅读(352)  评论(0)    收藏  举报