All geek questions in one place

How to overlay image over cup using html5 canvas

I am new to HTML5 canvas. I have an image of a cup, I am depicted on canvas.

This is a picture of a cup:

enter image description here

Now I'm trying to make another image (my photo, which is in the usual rectangular size), upload your design area for this image. How can I display this image that looks like this image on a cup?

I want to get the final image as follows:

enter image description here

I am using the canvas element to load an image.

 <!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';
+2
source share
1 answer

You want your second image to be distorted and look like it was wrapped around a cup.

, " " 2d

html Canvas 2d Context, . .

, , "" 2d.

... , "" . context.drawImage. , "" .

№1:

, :

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

# 2:

, . context.drawImage "" , Stackoverflow: HTML5 ( Fabric.js)

jsfiddle.net/AbdiasSoftware/e8hZy/

0

Source: https://habr.com/ru/post/1662991/

More articles:


All Articles