HTML5 Canvas扭曲变换

时间:2013-05-22 19:38:42

标签: html5 canvas distortion

我的Canvas肯定需要这种Photoshop转换。 我找到了这个插件,但转换后图像的质量非常差https://github.com/migurski/canvas-warp

感谢您的帮助。我真的需要这个。

1 个答案:

答案 0 :(得分:0)

透视变换是非平行变换。

canvas.getContext(“2d”)只允许你进行并行转换 - 没有透视图。

WebGL是画布的3D上下文,它有一个4x4变换矩阵,可以让你进行非平行变换。因此,可以在WebGL中进行透视变换

问题是浏览器采用WebGL:Chrome:是的,Mozilla,Safari,Opera:可能(最少运行),IE,IOS,Android:没有。

你也可以在CSS3中进行x / y / z转换。这也允许透视变换。浏览器的采用更好:IE:可能,Opera:不,所有其他人:是的。

[编辑 - 好的,如果真的需要使用canvas2D来显示透视图]

Thatcher Ulrich创建了一个出色的Canvas2.5D脚本,该脚本使用3x4矩阵进行透视数学运算。然后他将他的3x4矩阵映射到普通的3x3矩阵,以显示透视调整后的图像到画布。

这是他非常酷的演示:http://tulrich.com/geekstuff/canvas/perspective.html

警告:未来的数学概念很难......!

他的矩阵代码在演示中使用的jsgl.js脚本中。

相关问题