HTML5 Canvas 教程：七、图像

最新推荐文章于 2025-05-26 16:24:25 发布

翻译最新推荐文章于 2025-05-26 16:24:25 发布 · 1.3k 阅读

文章标签：

#HTML5 #Canvas

本文详细介绍如何使用HTML5 Canvas进行图像操作，包括绘制、调整大小、裁剪及批量加载图像的方法。通过实例代码，读者将学会如何在画布上显示、修改和管理图像。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

七、图像 Images

7.1绘制图像 Draw Image

为了使用HTML5画布绘制图像，可以使用drawImage()方法，该方法需要一个图像对象和一个目标点。目标点定义图像左上角相对于画布左上角的坐标值。

因为drawImage()方法需要图像对象作为参数，所以要首先创建一个图像，并在调用drawImage()方法之前将其加载。可以通过使用图像对象的onload属性来实现这一点。

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var imageObj = new Image();

imageObj.onload = function() {

context.drawImage(imageObj, 69, 50);

};

imageObj.src = 'darth-vader.jpg';

</script>

</body>

</html>

以上代码演示了在画布上绘制一张图片。

7.2图片尺寸 Image Size

若要使用HTML5画布设置图像的大小，可以再向drawImage()方法传入两个附加参数：宽度width和高度height。

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var x = 188;

var y = 30;

var width = 200;

var height = 137;

var imageObj = new Image();

imageObj.onload = function() {

context.drawImage(imageObj, x, y, width, height);

};

imageObj.src = 'darth-vader.jpg';

</script>

</body>

</html>

以上代码演示了再画布上绘制图片，并改变图片的原始尺寸。

7.3图像裁减 Image Crop

要使用HTML5 Canvas裁剪图像，我们可以向drawImage()方法添加六个附加参数，sourceX、sourceY、sourceWidth、sourceHeight、destWidth和destHeight。这些参数定义了要从图像中剪切出的矩形的位置和大小。

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var imageObj = new Image();

imageObj.onload = function() {

// draw cropped image

var sourceX = 150;

var sourceY = 0;

var sourceWidth = 150;

var sourceHeight = 150;

var destWidth = sourceWidth;

var destHeight = sourceHeight;

var destX = canvas.width / 2 - destWidth / 2;

var destY = canvas.height / 2 - destHeight / 2;

context.drawImage(imageObj, sourceX, sourceY, sourceWidth,

sourceHeight, destX, destY, destWidth, destHeight);

};

imageObj.src = 'darth-vader.jpg';

</script>

</body>

</html>

以上代码演示了从原始图片中裁减出一部分，并绘制在画布上。

7.4图像加载器 Image Loader

当HTML5画布应用程序需要多个图像时，在画布上绘制之前加载所有图像通常是个好主意。为了简化加载过程，可以方便地使用图像加载器函数，该函数接受图像源的散列，创建图像的散列，然后在加载了所有图像时调用用户定义的函数。

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

function loadImages(sources, callback) {

var images = {};

var loadedImages = 0;

var numImages = 0;

// get num of sources

for(var src in sources) {

numImages++;

}

for(var src in sources) {

images[src] = new Image();

images[src].onload = function() {

if(++loadedImages >= numImages) {

callback(images);

}

};

images[src].src = sources[src];

}

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var sources = {

darthVader: 'darth-vader.jpg',

yoda: 'yoda.jpg'

};

loadImages(sources, function(images) {

context.drawImage(images.darthVader, 100, 30, 200, 137);

context.drawImage(images.yoda, 350, 55, 93, 104);

});

</script>

</body>

</html>

以上代码演示了通过图片加载器载入图片，创建图片对象、绑定图片载入事件，并保存在图片数组中。当图片载入成功时裁切并在画布上绘制图片。