如何使用绝对坐标创建响应式画布？

Question

我使用Scrollpath plugin在网站中构建奇怪的导航。它基本上允许您使用canvas元素绘制路径，滚动运动遵循路径。

我现在想让它做出回应，但我真的不知道从哪里开始。

以lineTo(200, 1000)的形式定义您使用指令的路径，该路径从当前或以前的位置绘制一条线到参数中定义的线。

我认为问题在于，某个点可能位于当前视口之外。那么，一旦缩小窗口，我怎样才能计算出正确的新位置？

Answer 1

研究画布上的context.scale转换方法。

context.scale的美妙之处在于它允许您扩展/缩小画布，而无需更改原始路径坐标。

由于Scrollpath插件使用画布显示其内容，因此您应该能够使用.scale破解对插件的一些响应。

以下是一些可以帮助您入门的链接：

https://developer.apple.com/library/safari/documentation/audiovideo/conceptual/html-canvas-guide/Translation,Rotation,andScaling/Translation,Rotation,andScaling.html

http://www.sitepoint.com/modernize-your-html5-canvas-game/