javascript - 如何跟随 YUI 驱动的动画离开屏幕或在项目上居中视口？

Question

我正在使用改编自 YUI3文档示例的代码沿曲线路径为图形设置动画。

完整的画布尺寸故意非常大 - 肯定比大多数屏幕大 - 因此图形将很快耗尽视口空间并在屏幕上显示动画。

相反，我希望浏览器视口跟随或以图像为中心，以便它保持“在镜头中”。

有没有一种由 YUI 推动的方式来做到这一点？或者更简单的东西？

Answer 1

你可以做这样的事情，基本上只是canvas通过考虑canvas与页面相关的坐标来确保视口始终跟踪对象。

function track(x,y, offsetX, offsetY){
    var trackX = x - (canvas.offsetLeft + offsetX);
        trackY = y - (canvas.offsetTop + offsetY);

    window.scrollTo(trackX, trackY);

}

现场演示

​</p>