Canvas drawImage by points

Question

是否可以使用canvas.drawImage但是提供dest和源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无效，源必须位于源图像边界内。

Answer 2

是的，Canvas有3种有效的方式来使用绘制图像。目的地x,y，目的地x,y，width和height以及相同的来源{+ 1}}，x,y和width。

所以你可以做以下任何事情：

height

其中drawImage(image, dx, dy) drawImage(image, dx, dy, dw, dh) drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 来源且s... 目的地 x，y，宽度和高度。

来自spec的视觉示例：