Javascript 将CSS3矩阵3D绘制到画布2D元素

我想知道是否有一种方法可以使用CSS3 Matrix3D转换将图像绘制到画布中。所使用的上下文是一个

2D

上下文，用于渲染堆叠层和在其上方使用

matrix3D

转换的图像层（因为我没有在画布中绘制它）

所以基本上我想要实现的是将

transform:matrix3d（0.87,0,0.5，-0.00025,0,1,0,0，-0.5,0,0,0.87,0,0,0,550,0,1）

转换为2D上下文中的绘图画布方法

可能吗？目前，我对画布上方的CSS3层还很满意，但我正在开发的应用程序必须将画布导出到实际的图像文件（要发送给用户）

下面是一个片段，演示了我当前显示转换层的方式。因此，这里的目标是将“占位符”转换后的图像实际渲染到画布中

#画布{
背景：番茄；
高度：100vh；
宽度：100vw；
位置：相对位置；
}
.viewport.transformed图层{
身高：72%；
位置：绝对位置；
左：35%；
顶部：calc（21%-550px）；
-webkit变换：旋转（-1.5度）矩阵3d（0.87,0,0.5，-0.00025,0,1,0,0,0，-0.5,0,0.87,0,0,0,550,0,1）；
变换：旋转（-1.5度）矩阵3d（0.87,0,0.5，-0.00025,0,1,0,0，-0.5,0,0.87,0,0,550,0,1）；
不透明度：.9；
}

这是一个div，它用一些已绘制的图像模拟canvas元素

有一种可能不适合未来读者需求的黑客方法，但可能对您有用：

画布可以绘制SVG图像，SVG图像可以通过CSS进行转换。 因此，您可以将当前画布转换为dataURL，将此dataURL设置为SVGImage元素的href，然后将其导出为svg图像，并在画布上绘制

这是一个粗略的概念证明：

函数getTransformedCanvas（画布、CSTRANSFORM）{
返回新承诺（功能（res、rej）{
var dim=getTransformedDimensions（画布、CSTRANSFORM）；
var xlinkNS=”http://www.w3.org/1999/xlink",
svgNS=http://www.w3.org/2000/svg';
var svg=document.createElements（svgNS，'svg'），
defs=document.createElements（svgNS，'defs'），
style=document.createElements（svgNS，“style”），
image=document.createElements（svgNS，“image”）；
image.setAttributeNS（xlinkNS，'href'，canvas.toDataURL（））；
image.setAttribute（'width'，canvas.width）；
image.setAttribute（'height'，canvas.height）；
style.innerHTML='image{transform:'+cstransform+'；}'；
svg.appendChild（defs）；
defs.appendChild（样式）；
var rect=document.createElement（'rect'）；
appendChild（图像）；
setAttribute（'width'，dim.width）；
setAttribute（'height'，dim.height）；
var svgStr=new XMLSerializer（）.serializeToString（svg）；
var img=新图像（）；
img.onload=function（）{res（img）}；
img.onerror=rej；
img.src=URL.createObjectURL（新Blob（[svgStr]，{type:'image/svg+xml'}））；
});
}
函数getTransformedDimensions（画布、CSTransform）{
var orphan=！canvas.parentNode；
if（孤立）document.body.appendChild（画布）；
var oldTrans=getComputedStyle（canvas）.transform；
canvas.style.transform=cstransform；
var rect=canvas.getBoundingClientRect（）；
canvas.style.transform=oldTrans；
if（孤立）document.body.removeChild（画布）；
返回矩形；
}
//创建一个简单的棋盘
var canvas=document.createElement（'canvas'）；
canvas.width=canvas.height=30；
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle=‘橙色’；
ctx.fillRect（0,0,15,15）；
ctx.fillRect（15,15,15,15）；
var pattern=ctx.createPattern（canvas，'repeat'）；
canvas.width=canvas.height=300；
ctx.fillStyle=图案；
ctx.fillRect（0,0300）；
getTransformedCanvas（画布，
'平移（-540px）旋转（-1.5度）矩阵x3d（0.87,0,0.5，-0.00025,0,1,0,0，-0.5,0,0,0.87,0,0,550,0,1）'
)
.然后（功能（img）{
屏幕宽度=图像宽度；
屏幕高度=图像高度；
屏幕内.getContext（'2d'）.drawImage（img，0,0）；
})
.catch（控制台错误）
画布{
边框：1px实心；
}
有一种可能不适合未来读者需求的黑客方法，但可能对您有用：

画布可以绘制SVG图像，SVG图像可以通过CSS进行转换。
因此，您可以将当前画布转换为dataURL，将此dataURL设置为SVGImage元素的href，然后将其导出为svg图像，并在画布上绘制

这是一个粗略的概念证明：


函数getTransformedCanvas（画布、CSTRANSFORM）{
返回新承诺（功能（res、rej）{
var dim=getTransformedDimensions（画布、CSTRANSFORM）；
var xlinkNS=”http://www.w3.org/1999/xlink",
svgNS=http://www.w3.org/2000/svg';
var svg=document.createElements（svgNS，'svg'），
defs=document.createElements（svgNS，'defs'），
style=document.createElements（svgNS，“style”），
image=document.createElements（svgNS，“image”）；
image.setAttributeNS（xlinkNS，'href'，canvas.toDataURL（））；
image.setAttribute（'width'，canvas.width）；
image.setAttribute（'height'，canvas.height）；
style.innerHTML='image{transform:'+cstransform+'；}'；
svg.appendChild（defs）；
defs.appendChild（样式）；
var rect=document.createElement（'rect'）；
appendChild（图像）；
setAttribute（'width'，dim.width）；
setAttribute（'height'，dim.height）；
var svgStr=new XMLSerializer（）.serializeToString（svg）；
var img=新图像（）；
img.onload=function（）{res（img）}；
img.onerror=rej；
img.src=URL.createObjectURL（新Blob（[svgStr]，{type:'image/svg+xml'}））；
});
}
函数getTransformedDimensions（画布、CSTransform）{
var orphan=！canvas.parentNode；
if（孤立）document.body.appendChild（画布）；
var oldTr