Question

我是HTML5画布的新手。我有一个杯子的图像，我在画布上呈现。

这是杯子的形象：

enter image description here

现在我正在尝试渲染另一张图像（我的照片是正常的矩形尺寸），上传您此图像的设计区域。如何在杯子上渲染看起来像该图像的图像？

我想得到这样的最终图像：

enter image description here

我使用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';

Answer 1

你希望你的第二张图像“扭曲”并且看起来好像它已经缠绕在杯子周围。

您无法使用“开箱即用”背景2d将第二张图像变形为曲线图像

使用html Canvas 2d Context，你只能做四边形偏斜。因此，在倾斜图像之后，每个相对侧将始终平行。

因此，您无法使用“开箱即用”的上下文2d将图像变形为弯曲图像。

一些解决方法......您可以使用屏幕外临时画布将第二张图像“扭曲”成曲线。然后，您可以使用context.drawImage在杯子图像的顶部绘制该曲线图像。以下是两种可以“伪造”图像曲率的替代方案。

备选方案＃1：纹理映射

您可以使用纹理贴图将透视曲率应用于第二张图像：

http://archive.gamedev.net/archive/reference/articles/article852.html

备选方案＃2：垂直切片和拉伸

您可以垂直切片第二张图像以创建透视曲率。您可以使用context.drawImage的大小调整功能将像素“拉伸”到您的弯曲形状，就像之前的Stackoverflow答案一样：How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)

jsfiddle.net/AbdiasSoftware/e8hZy /

如何使用html5画布将图像叠加在杯子上

1 个答案: