使用canvas drawImage不透明度问题，将图像包裹在圆柱体上。

Question

我需要用javascript将一张图片包裹在另一张杯子的图片上，我找到了这个。在HTML5 JavaScript中，用圆柱形对象包裹图像。

这在加载左边有杯子把手的图片时有帮助。然而，当使用相同的功能（调整位置值）时，图像有一个不透明的应用。我不厌其烦地寻找发生这种情况的原因，然而我什么也没找到。

这个函数是用来包住杯子右边手柄的图像的。

function canvas2() {
 var canvas = document.getElementById('canvas2');
 var ctx = canvas.getContext('2d');

 var productImg = new Image();
 productImg.onload = function() {
   var iw = productImg.width;
   var ih = productImg.height;

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

   ctx.drawImage(
     productImg,
     0,
     0,
     productImg.width,
     productImg.height,
     0,
     0,
     iw,
     ih
   );
   loadUpperIMage();
 };

 productImg.src =
   'https://i.ibb.co/B2G8y1m/white-right-ear.jpg';

 function loadUpperIMage() {
   var img = new Image();
   img.src =
     'https://i.ibb.co/BnQP0TL/my-mug-image.png';

   img.onload = function() {
     var iw = img.width;
     var ih = img.height;

     var xOffset = 48, //left padding
         yOffset = 68; //top padding

     var a = 70; //image width
     var b = 8; //round ness

     var scaleFactor = iw / (6 * 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

       if (!isNaN(y)) {
         ctx.drawImage(
           img,
           X * scaleFactor,
           0,
           iw / 0.78,
           ih,
           X + xOffset,
           y + yOffset,
           1,
           162
         );
       }
     }
   };
 }

}

希望有人能帮忙解决这个问题!

下面是一个摆弄的问题 https:/jsfiddle.netL20aj5xr

Answer 1

这是因为你传递给的第4个参数是 绘制图像 - iw / 0.78. 将图像宽度乘以一个小于1的值，就可以得到大于图像宽度的值。画面中的 绘制图像的规范 说。

当源矩形在源图像之外时，源矩形必须剪裁到源图像上，目的矩形必须按相同比例剪裁。

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

因为源图宽度(sw)你所使用的图片尺寸大于源图片尺寸，目标矩形 "按相同比例进行剪切"。目标矩形的宽度是1px，因为你选择它作为你正在绘制的每条垂直线的宽度，剪裁后它的宽度变成了1*0.78=0.78px。现在宽度小于1px，说实话，我并不清楚它的实际工作原理，但我的猜测是，浏览器仍然需要绘制这1px，但由于源码是0.78px，它有点将源码拉伸到这1px，并添加一些抗锯齿来平滑过渡，这导致增加了透明度（即浏览器没有足够的信息来处理这1px，它试图尽可能地填充它）。你可以通过incresing来玩转这一点。sw 甚至更多，并观察增加透明度。

为了解决你的问题，我使用了 20 而不是 0.78 就像第一杯，似乎看起来还不错。