Question

我想使用html5 canvas元素创建一个图像模板，类似于this。

CSS具有3d变换选项，但这只能在DOM中进行，并且不会对图像进行任何更改。所以我想我应该选择画布。

我的想法是： 1）创建一个带有透明部分的图片的画布。 2）在第一个画布的顶部制作另一个画布，并使用.drawImage方法将其放置在透明区域上。 3）透视变换第二个图像，使其完全适合透明区域。

现在前两个是子步骤，但第三个是3D操作，我需要一些想法。

非常感谢任何帮助。

Answer 1

这是可能的，但你说的很棘手。

在图层中将多个图像绘制到画布上不是问题，可以通过setTransform设置2D变换矩阵（参见MDN）

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d')

var img = new Image()
img.src= 'https://upload.wikimedia.org/wikipedia/commons/4/4e/2-pt-sketchup.jpg'

ctx.drawImage(img, 0, 0,512,341)

var img2 = new Image()
img2.src = 'https://placeholdit.imgix.net/~text?txtsize=13&txt=230%C3%9750&w=70&h=80'

ctx.setTransform(1, Math.tan(Math.PI/-9), 0, 1, 0, 90);
ctx.drawImage(img2, 309, 135)

我不确定如何使用那个进行正确的3D变换，但我确定那里有人在做什么？

使用画布创建图像模板

1 个答案: