javascript - ctx Canvas 图像从底部减少宽度

Question

我使用下面的代码在 Canvas 中绘制了图像，其中我将元素图像与折叠的杯子图像组合在一起

canvas2(getFullElementImage);

function canvas2(getFullElementImage) {

    var canvas = document.getElementById("finalCanvas");
    var ctx = canvas.getContext("2d");
    var productImg = new Image();
    productImg.onload = function () {
        var iw = productImg.width;
        var ih = productImg.height;
        console.log("height");

        canvas.width = iw;
        canvas.height = ih;

        ctx.drawImage(productImg, 30, 0, productImg.width, productImg.height,
            0, 0, iw, ih);
        loadUpperIMage()
    };
    productImg.src = "https://res.cloudinary.com/faizykhan1212/image/upload/v1550583008/folded_cup_1.png"

    function loadUpperIMage() {
        var img = new Image();
        img.src = getFullElementImage;

        img.onload = function () {

            var iw = img.width;
            var ih = img.height;

            // alert(iw)

            var xOffset = 160, //left padding
                yOffset = 110; //top padding

            var a = 190.0; //image width
            var b = 20; //round ness

            var scaleFactor = iw / (4 * a);

            // draw vertical slices
            for (var X = 0; X < iw; X += 1) {
                var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
                ctx.drawImage(img, X * scaleFactor, 0, iw / 3, ih, X + xOffset, y + yOffset, 1, 574);

            }
        };
    }

};

图片是这样显示的:

我想让它从底部开始减少宽度，这样它就可以适应杯子的左右 Angular 。

谢谢

Answer 1

也许您可以使用 webGL 作为示例。这段代码很棒。我为这部分做了一些校准:

      var xOffset = 174, //left padding
          yOffset = 110; //top padding

        var a = 180.0; //image width
        var b = 80; //round ness

canvas2();

function canvas2() {

    var canvas = document.getElementById("finalCanvas");
    var ctx = canvas.getContext("2d");
    var productImg = new Image();
    productImg.onload = function () {
        var iw = productImg.width;
        var ih = productImg.height;
        console.log("height");

        canvas.width = iw;
        canvas.height = ih;

        ctx.drawImage(productImg, 30, 0, productImg.width, productImg.height,
            0, 0, iw, ih);
        loadUpperIMage()
    };
    productImg.src = "https://res.cloudinary.com/faizykhan1212/image/upload/v1550583008/folded_cup_1.png"

    function loadUpperIMage() {
        var img = new Image();
        img.src = "https://res.cloudinary.com/faizykhan1212/image/upload/v1550655724/download-3.png";

        img.onload = function () {

            var iw = img.width;
            var ih = img.height;

            // alert(iw)

            var xOffset = 174, //left padding
                yOffset = 110; //top padding

            var a = 180.0; //image width
            var b = 80; //round ness

            var scaleFactor = iw / (4 * a);

            // draw vertical slices
            for (var X = 0; X < iw; X += 1) {
                var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
                ctx.drawImage(img, X * scaleFactor, 0, iw / 3, ih, X + xOffset, y + yOffset, 1, 574);

            }
        };
    }

};

<canvas id="finalCanvas"></canvas>