HTML5 如何绘制动态动画

在本文中，我们将学习如何使用HTML5中的< strong >canvas元素在网页上构建动态动画。这个元素的主要目的是< strong >从零开始创建图形或操作图形。它可以使用JavaScript API来操作画布，创建动态动画和图形，并根据用户的交互做出反应。还可以使用它来构建Web应用程序的UI界面。

语法：

<canvas id="myCanvas" width="500" height="500"> 
    ... 
</canvas>

我们可以通过按照以下步骤逐个实现HTML中的动态动画：

步骤1： 创建动画循环：

let canvas = $("#myCanvas");
// Rendering 2-D canvas on webpage
let context = canvas.get(0).getContext("2d");
let Width = canvas.width();
let Height = canvas.height();
function animate() {
    // Creates endless loop by calling animate 
    // function again in 35 milliseconds
    setTimeout(animate, 35);
};
animate(); // Calling the function animate

HTML5 如何绘制动态动画

步骤2： 处理与动画交互的按钮逻辑：

let playAnimation = true;
let startButton =  $("#start"); let stopButton =$ ("#stop");
startButton.hide(); // Disabled Start button
startButton.click(() => {
    $(this).hide(); stopButton.show(); playAnimation = true; animate(); }); stopButton.click(() => {$ (this).hide();
   startButton.show();
   playAnimation = false;
});

步骤3： 选择和随机排列形状：

let Shape = function (x, y, width, height) {
   this.x = x;
   // Define starting position of the shape
   this.y = y; 
   // Define height and width of the shape 
   this.width = width; 
   this.height = height;
};

// To randomize the position and size of each shape
for (let i = 0; i < 5; i++) {
   let x = Math.random() * 200;
   let y = Math.random() * 200;
   let width = height = Math.random() * 50;
   shapes.push(new Shape(x, y, width, height));
};
context.fillRect(tmpShape.x, tmpShape.y, 
tmpShape.width, tmpShape.height);

步骤4： 改变方向：

tmpShape.x += 2; // Increment x co-ordinate by 2
tmpShape.y + // Increment y co-ordinate by 1
// For unpredictable patterns
tmpShape.x += Math.random() * 3 + 2;
tmpShape.y += Math.random() * 3 - 1;

以上四个步骤构成了在画布上创建动态动画的基本结构。根据所需的动画要求，我们需要构建逻辑并将逻辑编码到 animate() 函数中。下面是一个 将物体弹离画布边界的示例 。

示例： 这是一个完成示例，将演示如何在HTML5中绘制动态动画。

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>How to Build Dynamic Graphics in HTML5</title>
 
    <script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
    </script>
</head>
 
<body>
    <canvas width="300" height="300" id="Canvas">
    </canvas>
 
    <!-- Buttons to control the animation loop -->
    <div>
        <button id="start">Start</button>
        <button id="stop">Stop</button>
    </div>
 
    <script>
        let canvas =  $("#Canvas"); let context = canvas.get(0).getContext("2d"); context.fillStyle = "green"; // Width of the animation let Width = canvas.width(); // Height of the animation let Height = canvas.height(); let playAnimation = true; let startButton =$ ("#start");
        let stopButton =  $("#stop"); // Code to disable Start button startButton.hide(); startButton.click(function () {$ (this).hide();
            stopButton.show();
            playAnimation = true;
            animate();
        });
 
        // Code to disable Stop button
        stopButton.click(function () {
            $(this).hide();
            startButton.show();
            playAnimation = false;
        });
 
        // Code to define width and height of the shape
        let Shape = function (x, y, width, height) {
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
 
            // No reversal of direction in
            // the x-axis initially
            this.reverseX = false;
            this.reverseY = false;
        };
 
        // Code to generate ten random 
        // shapes for animation loop
        let shapes = new Array();
        for (let i = 0; i < 10; i++) {
            let x = Math.random() * 300;
            let y = Math.random() * 300;
            let width = height = Math.random() * 30;
 
            // Adding random shapes to canvas
            shapes.push(new Shape(x, y, width, height));
        };
        function animate() {
            context.clearRect(0, 0, Width, Height);
            let shapesLength = shapes.length;
            for (let i = 0; i < shapesLength; i++) {
                let tmpshape = shapes[i];
                if (!tmpshape.reverseX) {
 
                    // Increment the x co-ordinate by 3 units
                    tmpshape.x += 3;
                } else {
 
                    // Decrement the x co-ordinate by 3 units
                    tmpshape.x -= 3;
                };
                if (!tmpshape.reverseY) {
 
                    // Increment the y co-ordinate by 3 units
                    tmpshape.y += 3;
                } else {
 
                    // Decrement the y co-ordinate by 3 units
                    tmpshape.y -= 3;
                };
 
                // Code for shapes to bounce off the boundary
                context.fillRect(tmpshape.x, tmpshape.y,
                    tmpshape.width, tmpshape.height);
                if (tmpshape.x < 0) {
                    tmpshape.reverseX = false;
                } else if (tmpshape.x + tmpshape.width > Width) {
 
                    // Reverse the direction of shape if position of 
                    // shape is greater than width of canvas
                    tmpshape.reverseX = true;
                };
                if (tmpshape.y < 0) {
                    tmpshape.reverseY = false;
                } else if (tmpshape.y + tmpshape.height > Height) {
 
                    // Reverse the direction of shape if position of 
                    // shape is greater than height of canvas
                    tmpshape.reverseY = true;
                };
            };
            if (playAnimation) {
                setTimeout(animate, 35);
 
            };  // Runs animate() function infinitely 
            // after every 35ms
        };
        animate();
    </script>
</body>
 
</html>

输出：

HTML5 如何绘制动态动画