HTML5 Canvas 繪制圖像

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

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

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

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

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

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

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

必須先完全加載圖像，然后才能繪制圖像。要確定圖像是否已完全加載，請(qǐng)?jiān)趫D像上附加一個(gè)事件偵聽器。加載圖像時(shí)將調(diào)用此事件偵聽器?？雌饋硎沁@樣的:

image.addEventListener('load', drawImage1);

該drawImage1參數(shù)是事件觸發(fā)時(shí)調(diào)用的函數(shù)。
這是一個(gè)完整的代碼示例，可在畫布上創(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);
}

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

縮放圖像

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

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

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

繪制圖像的一部分

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

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);

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

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