在Canvas画布上绘制图像时，由于图像的加载是异步的，因此需要采用异步调用的方法来确保图像在加载完成后再进行绘制。以下是几种常见的异步调用方法：
-
使用Image对象的onload事件：这是最常见和直接的方法。通过为Image对象设置src属性，并在其onload事件处理函数中执行绘制操作，可以确保图像在加载完成后才进行绘制。
-
使用Promise和async/await：通过封装图像加载的逻辑为一个返回Promise的函数，并使用async/await语法，可以使代码更加清晰和易于维护。
下面是一个使用Image对象的onload事件的HTML文件示例：
示例效果与源代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas图像上叠加文字示例</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = '/examples/canvas-qa/120/image/1.jpg';
img.onload = function() {
ctx.drawImage(img, 10, 10);
ctx.font = '24px Arial';
ctx.fillStyle = 'white';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var text = '图形开发学院';
ctx.fillText(text, 100, 30);
};
</script>
</body>
</html>
|
尝试一下 »
在这个示例中，我们创建了一个Image对象，并设置了其src属性为图像的路径。然后，我们为img对象添加了onload事件处理函数，该函数在图像加载完成后执行，并使用drawImage方法将图像绘制到Canvas上。
接下来是一个使用Promise和async/await的示例，它展示了如何将图像加载封装为一个异步操作：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas异步绘制图像（Promise示例）</title>
</head>
<body>
<canvas id="myCanvas" width="420" height="450" style="border:1px solid #000000;"></canvas>
<script>
function loadImage(src) {
return new Promise((resolve, reject) => {
var img = new Image();
img.src = src;
img.onload = () => resolve(img);
img.onerror = () => reject(new Error('图像加载失败'));
});
}
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
(async function() {
try {
var img = await loadImage('/examples/canvas-qa/120/image/1.jpg');
ctx.drawImage(img, 0, 0);
console.log('图像已加载并绘制到Canvas上');
} catch (error) {
console.error(error.message);
}
})();
</script>
</body>
</html>
|
尝试一下 »
在这个示例中，我们定义了一个loadImage函数，它接受一个图像路径作为参数，并返回一个Promise。当图像加载完成时，Promise被解析为图像对象；如果加载失败，则Promise被拒绝并抛出一个错误。然后，我们使用async/await语法来异步加载图像，并在加载完成后将其绘制到Canvas上。
这两种方法都是处理Canvas上异步绘制图像的有效方式，你可以根据具体需求选择适合的方法。