javascript - Canvas 按点绘制图像

Question

是否可以使用 canvas.drawImage 但提供目标和源 x/y 坐标，而不是尺寸？

类似于Java的drawImage是如何工作的？

boolean Graphics.drawImage(Image img,
   int dstx1, int dsty1, int dstx2, int dsty2,
   int srcx1, int srcy1, int srcx2, int srcy2,
   ImageObserver observer);

Answer 1

是的，与其他答案一样:

drawImage(image,   srcX, srcY, srcW, srcH,   dstX, dstY, dstW, dstH);

因此在这种情况下，您必须颠倒目标和源的顺序以及计算宽度和高度:

boolean Graphics.drawImage(Image img,
   int dstx1, int dsty1, int dstx2, int dsty2,
   int srcx1, int srcy1, int srcx2, int srcy2,
   ImageObserver observer);

将成为:

ctx.drawImage(img, srcx1, srcy1, srcx2 - srcx1, srcy2 - srcy1,
                   dstx1, dsty1, dstx2 - dstx1, dsty2 - dsty1);

或者作为包装函数，与 Java 版本参数兼容:

function drawImage(img, dstx1, dsty1, dstx2, dsty2, srcx1, srcy1, srcx2, srcy2) {
    ctx.drawImage(img, srcx1, srcy1, srcx2-srcx1, srcy2-srcy1,
                       dstx1, dsty1, dstx2-dstx1, dsty2-dsty1);
}

0 的宽度和高度无效，源必须在源图像边界内。