我是 HTML5 画布新手。我有一个杯子的图像，我将其渲染在画布上。
这是杯子的图片：
现在我正在尝试渲染另一张图像（我的照片为正常矩形尺寸），上传该图像的设计区域。我怎样才能渲染这个看起来像杯子上的图像的图像？
我想得到这样的最终图像：
我使用canvas元素上传图像。
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:5px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script src="js/test.js" type="text/javascript"></script>
</body>
</html>
JS
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
var x = 0;
var y = 0;
var width = 290;
var height = 297;
imageObj.onload = function() {
context.drawImage(imageObj, x, y);
};
imageObj.src = 'images/cup.jpg';
您希望第二个图像“变形”并看起来好像它包裹在杯子周围。
您无法使用“开箱即用”上下文 2d 将第二个图像扭曲为弯曲图像
使用html Canvas 2d Context，只能做四边形倾斜。因此，在倾斜图像后，每个相对边将始终平行。
因此，您无法使用“开箱即用”上下文 2d 将图像扭曲成弯曲图像。
一些解决方法...您可以使用屏幕外临时画布将第二个图像“扭曲”成曲线。然后，您可以使用 context.drawImage 在杯子图像的顶部绘制该弯曲图像。这里有两种方法可以让你“伪造”图像的曲率。
替代方案#1：纹理映射
您可以使用纹理映射将透视曲率应用到第二个图像：
http://archive.gamedev.net/archive/reference/articles/article852.html http://archive.gamedev.net/archive/reference/articles/article852.html
替代方案#2：垂直切片和拉伸
您可以垂直切片第二个图像以创建透视曲率。您可以使用 context.drawImage 的调整大小功能将像素“拉伸”到弯曲的形状，就像之前的 Stackoverflow 答案一样：如何在HTML5（或Fabric.js）中制作屋顶文字效果和山谷文字效果 https://stackoverflow.com/questions/19544735/how-to-make-rooftext-effect-and-valley-text-effect-in-html5-or-fabric-js
jsfiddle.net/AbdiasSoftware/e8hZy/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
