HTML5 Canvas 繪制圖像

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

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

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

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

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

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

var image = new Image();
image.src = "/run/html/canvas-shot.png";

必須先完全加載圖像，然后才能繪制圖像。要確定圖像是否已完全加載，請在圖像上附加一個事件偵聽器。加載圖像時將調用此事件偵聽器?？雌饋硎沁@樣的:

image.addEventListener('load', drawImage1);

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

window.onload = function() {
    drawEx1();
}

var image1 = null;

function drawEx1() {
    image1 = new Image();
    image1.src =
        "/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);
}

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

縮放圖像

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

var width  = 200;
var height = 100;
context.drawImage(image2, 10, 10, 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, sx, sy, sw, sh, dx, dy, dw, dh);

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

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