对canvas的translate()方法的理解

最新推荐文章于 2024-04-01 07:08:09 发布

最新推荐文章于 2024-04-01 07:08:09 发布 · 266 阅读

本文介绍了如何在HTML5 canvas中通过调用canvas.save()、translate()和restore()等方法来锁定、平移画布状态并进行图形绘制。通过实例演示了如何将原点平移到指定位置，并在不同状态下绘制图形，最终使用clipRect方法实现图形裁剪。

            canvas.save();//锁画布(为了保存之前的画布状态)
            canvas.translate(10, 10);//把当前画布的原点移到(10,10),后面的操作都以(10,10)作为参照点，默认原点为(0,0)
            drawScene(canvas);
            canvas.restore();//把当前画布返回（调整）到上一个save()状态之前

            canvas.save();//锁画布(为了保存之前的画布状态)
            canvas.translate(160, 10);//把当前画布的原点移到(160,10),后面的操作都以(160,10)作为参照点，
            canvas.clipRect(10, 10, 90, 90);//这里的真实坐标为左上(170,170)、右下(250,250)
            canvas.clipRect(30, 30, 70, 70, Region.Op.DIFFERENCE);
            drawScene(canvas);
            canvas.restore();