Dart CanvasRenderingContext2D.drawImageToRect用法及代碼示例

將圖像從 CanvasImageSource 繪製到此畫布的某個區域。

圖像將被繪製到由 destRect 定義的畫布區域。 sourceRect 定義繪製的源圖像的區域。如果沒有提供sourceRect，那麽來自source 的整個矩形圖像將被繪製到這個上下文中。

如果圖像大於畫布允許的大小，則圖像將被剪裁以適應可用空間。

CanvasElement canvas = new CanvasElement(width: 600, height: 600);
CanvasRenderingContext2D ctx = canvas.context2D;
ImageElement img = document.query('img');
img.width = 100;
img.height = 100;

// Scale the image to 20x20.
ctx.drawImageToRect(img, new Rectangle(50, 50, 20, 20));

VideoElement video = document.query('video');
video.width = 100;
video.height = 100;
// Take the middle 20x20 pixels from the video and stretch them.
ctx.drawImageToRect(video, new Rectangle(50, 50, 100, 100),
    sourceRect: new Rectangle(40, 40, 20, 20));

// Draw the top 100x20 pixels from the otherCanvas.
CanvasElement otherCanvas = document.query('canvas');
ctx.drawImageToRect(otherCanvas, new Rectangle(0, 0, 100, 20),
    sourceRect: new Rectangle(0, 0, 100, 20));

也可以看看：

• CanvasImageSource 有關從 source 檢索哪些數據的更多信息。
• drawImage 來自 WHATWG。