HTML5怎么绘制动画 代码实例

HTML5如何绘制动画

在HTML5中，我们可以使用canvas元素来绘制动画。canvas是HTML5新增的元素，它提供了绘制图形和动画的API。

我们先来看一个简单的例子：让一个圆移动到画布的右边，然后从右边重新出现并继续移动。

      var canvas=document.getElementById("myCanvas");
      var ctx=canvas.getContext("2d");
      var x=50;
      var dx=5;

      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.arc(x, 75, 20, 0, Math.PI*2);
        ctx.fillStyle="#0095DD";
        ctx.fill();
        ctx.closePath();
        x +=dx;
        if (x > canvas.width + 20) {
          x=-20;
        }
      }

      setInterval(draw, 10);
    

代码解析：

首先，我们获取canvas元素和它的上下文。接着，定义圆的初始位置和它在x轴方向上的变化量dx。然后，我们编写绘制函数draw()。在draw()函数中，我们先清除画布，然后绘制一个圆，放在x轴坐标为x的位置上。然后，我们将x加上dx，使圆在每次调用draw()函数时在x轴上向右移动dx个像素。最后，我们检查圆是否已经移动到了画布的右边界以外。如果是，我们将x重置为-20，使圆在下一次操作时出现在画布的左侧，并继续向右运动。

如何同时绘制多个物体

以上例子只绘制了一个圆，现在我们将来扩展，使它能同时绘制多个物体。

      var canvas=document.getElementById("myCanvas");
      var ctx=canvas.getContext("2d");
      var circle1={
        x: 50,
        y: 70,
        dx: 10,
        radius: 20,
        color: "#0095DD"
      };

      var circle2={
        x: 120,
        y: 100,
        dx: 5,
        radius: 30,
        color: "#FFA500"
      };

      function drawCircle(circle) {
        ctx.beginPath();
        ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2);
        ctx.fillStyle=circle.color;
        ctx.fill();
        ctx.closePath();
      }

      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawCircle(circle1);
        drawCircle(circle2);
        circle1.x +=circle1.dx;
        circle2.x +=circle2.dx;
        if (circle1.x > canvas.width + circle1.radius) {
          circle1.x=-circle1.radius;
        }
        if (circle2.x > canvas.width + circle2.radius) {
          circle2.x=-circle2.radius;
        }
      }

      setInterval(draw, 10);
    

代码解析：

我们现在定义了两个圆，分别是circle1和circle2。我们将它们放在一个数组中，以便以后可以方便重用代码来绘制它们。然后，我们编写一个新的函数drawCircle()来绘制单个圆。

如何使用requestAnimationFrame函数改进动画性能

上面例子中我们使用了setInterval()函数来实现动画，但是使用requestAnimationFrame()函数可以让动画更加流畅。

      var canvas=document.getElementById("myCanvas");
      var ctx=canvas.getContext("2d");
      var x=50;
      var dx=5;

      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.arc(x, 75, 20, 0, Math.PI*2);
        ctx.fillStyle="#0095DD";
        ctx.fill();
        ctx.closePath();
        x +=dx;
        if (x > canvas.width + 20) {
          x=-20;
        }
        requestAnimationFrame(draw);
      }

      draw();
    

代码解析：

与使用setInterval()不同，使用requestAnimationFrame()会自动适应浏览器的刷新率，以获得最佳的动画性能。我们将draw()函数作为一个参数传递给requestAnimationFrame()函数，这样浏览器会在每个刷新周期调用它一次。

如何通过CSS3使绘制图形和动画更具有动态变化

我们还可以使用CSS3来实现更炫酷的动画效果。

代码解析：

我们将canvas元素的position属性设置为absolute，使之可以与其他元素重叠。然后，我们使用CSS3中的动画属性来创建一个循环5秒的动画。在动画中，我们依次规定canvas元素从左上角移动到右上角、右下角、左下角和最终返回到左上角。这样的动画效果可以让我们的绘制图形更生动有趣。

本文示例介绍了如何使用HTML5绘制动画。通过这些例子可以看出，HTML5提供了强大的API，可以让我们通过编写JavaScript代码来实现各种各样的动画。使用HTML5绘制动画时，我们需要关注动画的性能和效果，选择合适的API和算法，以获得最佳的用户体验。