如何创建具有绝对坐标的响应画布

How to create a responsive canvas with absolute coordinates?

本文关键字：坐标响应何创建创建更新时间：2023-09-26

我正在使用Scrollpath插件在网站中构建一个奇怪的导航。它基本上允许您使用画布元素绘制一条路径，滚动移动跟随该路径。

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

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

我认为，问题是一个点可能在当前视口之外。那么，一旦缩小窗口，如何计算其正确的新位置？

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

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

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

这里有一些链接可以让你开始：

https://developer.apple.com/library/safari/documentation/audiovideo/conceptual/html-canvas-guide/Translation、旋转和缩放/平移、旋转和Scaling.html

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