Canvas缩放变化

 function drawScreen() {
                context.save();
//                 画一个默认左上角画布原点，缩放属性，原点也会改变，变成两倍
                context.setTransform(1,0,0,1,0,0);
                context.scale(2,2);
                context.fillStyle="purple";
                context.fillRect(100,100,50,50);

//                画一个原点变成中心，width，height放大两倍，
                context.setTransform(1,0,0,1,0,0);
                var x=100;
                var y=100;
                var width=50;
                var height=50;
                context.translate(x +.5*width,x +.5*height);
                context.scale(2,2);
                context.fillStyle="black";
                context.fillRect(-.5*width, -.5*height,width,width);

                context.restore();

                // 画一个正常的正方形
                context.fillStyle="red";
                context.fillRect(100,100,50,50);
            }