1 
    <!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>Animating Sprites In HTML5 Canvas | onlyWebPro.com</title>
</head>
<body>
    <canvas id="myCanvas" width="100" height="100">
        <!-- Insert fallback content here -->
        Sorry, your browser doesn't support canvas technology
    </canvas>
    <script>
    var width = 100,
            height = 100,
            frames = 4,

            currentFrame = 0,

            canvas = document.getElementById("myCanvas");
            ctx = canvas.getContext("2d");
            image = new Image()
            image.src = 'sprite.png';

    var draw = function(){
            ctx.clearRect(0, 0, width, height);
            ctx.drawImage(image, 0, height * currentFrame, width, height, 0, 0, width, height);

            if (currentFrame == frames) {
              currentFrame = 0;
            } else {
              currentFrame++;
            }
    }

    setInterval(draw, 100);
    </script>
</body>
</html>

以上是创建画布的代码，该画布在画布中运行精灵动画序列。

现在我想在同一个 html 中包含另一个画布图像。当我尝试旧的被替换时，请帮助我用另一个图像创建另一个画布。

任何人都可以通过提供一种在单个 HTML 页面中创建多个画布的方法来解决它

4

1 回答 1

1

在 html 部分添加：

<canvas id="mySecondCanvas" width="100" height="100">
        <!-- Insert fallback content here -->
        Sorry, your browser still doesn't support canvas technology
    </canvas>

这就是你如何使用 javascript 获得这个画布：

var second_canvas = document.getElementById("mySecondCanvas");

:)

于 2013-07-20T09:59:28.547 回答