Canvas改变原点绕中心旋转

最新推荐文章于 2024-08-11 18:03:48 发布

Wangdanting123

最新推荐文章于 2024-08-11 18:03:48 发布

阅读量8.1k

点赞数

本文链接：https://blog.csdn.net/Wangdanting123/article/details/51811245

版权

 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);
            }