使用画布创建图像模板
Create an image template using canvas
我想使用 html5 canvas 元素创建一个图像模板,如下所示。
CSS 具有 3d 转换选项,但这只能在 DOM 中实现,并且不会对图像进行任何更改。所以我想我应该选择画布。
我的想法是:1)创建一个带有透明部分的图片的画布。2)在第一张画布上制作另一个画布,并使用.drawImage方法将其放置在透明区域。3)透视变换第二个图像,使其完全适合透明区域。
现在前两个是子步骤,但第三个步骤涵盖了3D操作,我需要一些想法。
任何帮助都非常感谢。
这是可能的,但正如你所说,这很棘手。
在画布上分层绘制多个图像不是问题,并且有一种方法可以使用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 转换,但我确信有人会这样做?
相关文章:
- 为在外部单击时关闭的库图像创建预览效果
- 如何为图像创建“另存为”按钮
- 如何为图像创建具有随机大小的磁贴照片库
- 从网页中的 2 张图像创建新图像
- Javascript/Canvas - 从预先存在的图像创建新图像
- 从 1 个图像创建多个过渡按钮
- 使用 JavaScript 和 CSS 使用 2 张图像创建进度条
- 建议为选择图像创建代码
- 如何从 mysql 数据库中的图像创建图像幻灯片
- 已经为单个图像创建了点击效果,但希望其他图像具有相同的效果
- 如何限制xml文件中显示的12个图像,并自动为其他图像创建页面
- 通过数据库为图像创建上传/下载功能
- Javascript客户端-从网页上的现有图像创建新图像
- Jquery动态图像创建和动画
- 为容器中的非全宽图像创建视差效果
- 为滑块上显示的每个图像创建一个id(Basic jQuery slider)
- 简单的JSZip -从现有的图像创建Zip文件
- 在javascript上从图像创建画布
- 如何从图像创建缩略图
- 在复制时,TinyMCE PowerPaste插件并不总是为图像创建base64字符串