HTML 画布 - 高级动画

在上一个章节中，基本动画帮助我们了解如何对画布元素进行动画处理。在这里，我们将了解动画中的物理概念，如速度、加速度等。

让我们处理一个简单的加速度示例，在该示例中，我们使用一个小方块进行展开和收缩。实现代码如下所示。

示例

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Advanced Animations</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="animation();">
      <canvas id="canvas" width="555" height="555" style="border: 1px solid black;"></canvas>
      <script>
         function animation() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var reqframe;
            var square = {
               posx: 0,
               posy: 0,
               width: 50,
               height: 50,
               vx: 2,
               vy: 1,
               draw: function() {
                  context.fillRect(this.posx, this.posy, this.width, this.height);
                  context.fillStyle = 'red';
                  context.fill();
               }
            };

            function draw() {
               context.clearRect(0, 0, canvas.width, canvas.height);
               square.draw();
               square.width += square.vx;
               square.height += square.vy;
               if (square.height + square.vy > canvas.height || square.height + square.vy < 0) {
                  square.vy = -square.vy;
               }
               if (square.width + square.vx > canvas.width || square.width + square.vx < 0) {
                  square.vx = -square.vx;
               }
               reqframe = window.requestAnimationFrame(draw);
            }
            canvas.addEventListener('mouseover', function(e) {
               reqframe = window.requestAnimationFrame(draw);
            });
            canvas.addEventListener('mouseout', function(e) {
               window.cancelAnimationFrame(reqframe);
            });
         }
      </script>
   </body>
</html>

输出

代码返回的输出为

打印页面

上一个

下一个