canvas-变换-scale(缩放)

<script type="text/javascript">

    window.onload = function () {
        /** @type {HTMLCanvasElement} */
        //1.获取画布
        var canvas = document.querySelector('#test');
        if (canvas.getContext) {
            //2.获取画笔
            var ctx = canvas.getContext('2d');

        /* 缩放 scale(x,y)
        scale 方法接受两个参数x,y 分别是横轴和纵轴的缩放因子,它们都必须是正值
        值<1.0 表示缩小  值>1.0表示放大  值=1.0表示无效果
            缩放一般用来增减图形在canvas中的像素数目,对形状,位图进行缩小或放大
          */
            ctx.translate(50,50);ctx.scale(2,2);  //canvas中的rotate是累加的
            /*
                放大：使画布内css像素的个数变少,单个css像素占据的实际尺寸变大
                缩小：使画布内css像素的个数变多,单个css像素占据的实际尺寸变小
            */

            ctx.beginPath();
            ctx.fillRect(50,50,200,200)
        }
    }
</script>