function drawScreen() {
//          繪製黑色正方形
                context.fillStyle = "black";
                context.fillRect(20, 20, 25, 25);
//                繪製紅色正方形，按中心旋轉
                context.setTransform(1, 0, 0, 1, 0, 0);
                var angleInRadians = 45 * Math.PI / 180;
//                原本的開始座標
                var x = 100;
                var y = 100;
//                正方形的長寬
                var width = 50;
                var height = 50;
//                將原點轉移到中心
                context.translate(x + .5 * width, y + .5 * height);
                context.rotate(angleInRadians);
//                畫正方形
                context.fillStyle = "red";
                context.fillRect(-.5 * width, -.5 * width, width, height);

//                再畫一個旋轉正方形
                context.setTransform(1,0,0,1,0,0);
                var angleInRadians=90*Math.PI/180;
                var x=100;
                var y=100;
                var width=50;
                var height=50;
                context.translate(x + .5 * width, y + .5 * height);
                context.rotate(angleInRadians);
                context.fillStyle="purple";
                context.fillRect(-.5 * width, -.5 * width, width, height);
            }