如何在canvas html中对多个图像调用函数

在HTML Canvas中对多个图像调用函数，通常涉及到图像的加载、绘制以及可能的动画效果。以下是一个基础的概念介绍和相关代码示例：

基础概念

Canvas: HTML5中的一个元素，可以通过JavaScript脚本来绘制图形。
Image对象: 用于加载和显示图片。
函数调用: 将特定的操作封装成函数，以便重复使用。

类型

静态图像: 单纯的图像绘制。
动画图像: 图像的动态显示，如移动、旋转等。

应用场景

游戏开发: 绘制角色、背景等。
数据可视化: 图表和图形的绘制。
广告动画: 创造吸引眼球的动态广告。

示例代码

以下是一个简单的示例，展示如何在Canvas上加载并绘制多个图像，并对它们调用一个简单的函数来改变位置。

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Image Example</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        // 获取canvas元素和绘图上下文
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // 图像数组
        var images = [];
        var imageUrls = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

        // 加载图像
        function loadImage(url) {
            return new Promise((resolve, reject) => {
                var img = new Image();
                img.onload = () => resolve(img);
                img.onerror = reject;
                img.src = url;
            });
        }

        // 加载所有图像
        Promise.all(imageUrls.map(loadImage)).then(imgs => {
            images = imgs;
            drawImages();
        }).catch(err => console.error(err));

        // 绘制图像的函数
        function drawImages() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除canvas
            images.forEach((img, index) => {
                img.x = (index + 1) * 100; // 设置图像的x坐标
                img.y = 100; // 设置图像的y坐标
                ctx.drawImage(img, img.x, img.y);
            });
        }

        // 动画循环
        function animate() {
            drawImages();
            requestAnimationFrame(animate);
        }
        animate();
    </script>
</body>
</html>