html5 Canvas 使用drawImage()繪制圖像，在畫布上繪制圖像之前，需要創(chuàng)建一個Image對象，然后將圖像加載到內(nèi)存中。

html5畫布具有用于在其上繪制圖像的選項。您可以使用drawImage()2D上下文對象上的各種功能來執(zhí)行此操作。有三種不同的drawImage()功能:

drawImage(image, dx, dy);
drawImage(image, dy, dw, dh);
drawImage(image, sx, sy, sw, sh, dh);

第一個參數(shù)image是要繪制的圖像。本文稍后將說明如何創(chuàng)建和加載圖像。
在dx和dy參數(shù)是短期的“destinationX”和“destinationY”。這些參數(shù)確定在畫布上繪制圖像的位置。
在dw和dh參數(shù)是短期的“destinationWidth”和“destinationHeight”。這些參數(shù)確定在繪制圖像時縮放圖像的大小。
在sx和sy參數(shù)是短期的“sourceX”和“sourceY”。這些參數(shù)確定從源圖像中的哪個位置開始將圖像的矩形復制到畫布上。
在sw和sh參數(shù)是短期的“sourceWidth”和“sourceHeight”

創(chuàng)建和加載圖像

在畫布上繪制圖像之前，需要創(chuàng)建一個Image對象，然后將圖像加載到內(nèi)存中。這是用JavaScript完成的方法:

var image = new Image();
image.src = "https://www.nhooo.com/run/html/canvas-shot.png";

必須先完全加載圖像，然后才能繪制圖像。要確定圖像是否已完全加載，請在圖像上附加一個事件偵聽器。加載圖像時將調(diào)用此事件偵聽器。看起來是這樣的:

image.addEventListener('load', drawImage1);

該drawImage1參數(shù)是事件觸發(fā)時調(diào)用的函數(shù)。
這是一個完整的代碼示例，可在畫布上創(chuàng)建，加載和繪制圖像:

window.onload = function() {
    drawEx1();
}var image1 = null;
 
function drawEx1() {
    image1 = new Image();
    image1.src =
        "https://www.nhooo.com/run/html/canvas-shot.png";
    image1.addEventListener('load', drawImage1);
}
 
function drawImage1() {
    var canvas  = document.getElementById("ex1");
    var context = canvas.getContext("2d");
 
    context.drawImage(image1, 10, 10);
}

這是在畫布上繪制時上述代碼的結(jié)果:

縮放圖像

如本文開頭所述，您可以在繪制圖像時縮放圖像。這是一個代碼示例，該示例繪制圖像并將其縮放為200的寬度和100像素的高度:

var width  = 200;
var height = 100;
context.drawImage(image2, width, height);

是在畫布上繪制時圖像的外觀，具有縮放的寬度和高度:

繪制圖像的一部分

可以僅將圖像的一部分繪制到畫布上。繪制的部分是從圖像復制的矩形。這是代碼示例:

var dx = 10;
var dy = 10;
var dw = 75;
var dh = 75;
var sx = 20;
var sy = 20;
var sw = 75;
var sh = 75;
 
context.drawImage(image3, dh);

參數(shù)為sx，sy，sw和sh（聲明sx,sy矩形開始）圖像，并且寬度（sw）和高度（sh）的矩形.

這是在畫布上繪制時圖像矩形的外觀: