html2D转换案例,javascript – 使用SVGMatrix的HTML画布2D转换的文档

我正在考虑使用HTML canvas元素进行简单的游戏,但是很难找到有关2D绘图上下文的某些功能的完整文档.通常我会看一下MDN,但仍然缺少一些东西.

特别是,即使我看了HTML Canvas 2D Context W3C Candidate Recommendation(我理解为关于这个主题的官方词),我似乎无法找到更多关于使用SVGMatrix对象进行转换的信息.

我给出的两个链接都描述了CanvasRenderingContext2D对象上的转换函数,它将矩阵的各个元素作为参数.例如：

context.transform(a,b,c,d,e,f)

但是,链接也有这些注释：

The methods listed below remain for historical and compatibility

reasons as SVGMatrix objects are used in most parts of the API

nowadays and will be used in the future instead.

Most of the API uses SVGMatrix objects rather than this API. This API

remains mostly for historical reasons

尽管页面上说大多数API现在都使用SVGMatrix对象而不是指定单个矩阵元素,但我似乎无法找到相关文档.

有人可以指向我一些官方文档,或以其他方式描述使用SVGMatrix对象而不是指定单个矩阵元素的API吗？

解决方法:

这个答案可能比实际的固体信息更具有模糊的形式,但考虑到情况,我希望它仍然可以提供一些输入.

关于它的用法没有太多文档 – 仍然(我相信)关于公开以及如何实现它(使用canvas / paths)的讨论,这就是我们还没有看到它的原因. Canvas有(或者有？)一个方法currentTransform,它会返回一个SVGMatrix对象,但它没有被广泛支持,或被隐藏在实验标志后面(即在Chrome中.免责声明：最近可能已经改变).

其用途也在here (MDN)中提及,但没有进一步记录.

我会假设在canvas的情况下,将来你可以将检索和修改的对象传递给f.ex. setTransform()作为现有签名的“重载”选项(很像Path2D对象可以是笔划和填充),尽管建议中没有这一点(请参阅下面的SVG如何使用它的可能的使用模式) ).

该对象与setTransform()/ transform()的作用相同,但是,您可以使用相同的方法(因为属性本​​身是只读的)与上下文一样使用ae的值初始化它,因此没有区别原则(查看开源浏览器的源代码将准确显示它是如何使用的).

另请参阅this article(有关SVG的更多信息以及如何使用该对象).

在f.ex中讨论对象本身的当前实现.控制台,你可以这样做：

var matrix = document.createElementNS('http://www.w3.org/2000/svg','svg')

.createSVGMatrix();

标签：javascript,html5,canvas,matrix,2d

来源： https://codeday.me/bug/20190609/1206877.html