JS使用canvas绘制旋转风车动画

2023年6月10日下午11:14 • JavaScript

Canvas 是 HTML5 提供的一种绘图接口，能够通过 JavaScript 在网页上绘制出各种复杂的图案和动画效果。本文将详细讲解如何使用 Canvas 绘制旋转风车动画。

步骤

在 HTML 中创建 Canvas 元素

首先需要在 HTML 中创建一个 Canvas 元素，它将作为绘图的画布。可以设置 Canvas 的宽高和 ID，如下所示：

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

获取 Canvas 上下文

在 JavaScript 中，需要获取 Canvas 上下文来绘制图形。可以通过下面的代码获取 Canvas 上下文：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

绘制风车的叶子

使用 beginPath() 方法开始一条路径并设置路径的起点。然后使用 lineTo() 方法画出三角形的三个点，并使用 closePath() 方法封闭路径。接着通过 fill() 方法填充颜色。代码如下：

ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + l * Math.sin(angle), y + l * Math.cos(angle));
ctx.lineTo(x + h * Math.sin(angle + 0.3 * Math.PI), y + h * Math.cos(angle + 0.3 * Math.PI));
ctx.lineTo(x + l * Math.sin(angle + 0.6 * Math.PI), y + l * Math.cos(angle + 0.6 * Math.PI));
ctx.lineTo(x, y);
ctx.closePath();
ctx.fill();

绘制风车的主体

使用 lineWidth 属性设置绘制线条的宽度。使用 moveTo() 方法设置路径的起点。然后使用 lineTo() 方法画出直线的终点。代码如下：

ctx.lineWidth = 5;  
ctx.beginPath();
ctx.moveTo(250, 250);
ctx.lineTo(250, 50);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(250, 50);
ctx.lineTo(200, 100);
ctx.lineTo(300, 100);
ctx.closePath();
ctx.fill();

渲染动画

HTML5 中提供了一个 requestAnimationFrame() 方法，用于在屏幕刷新之前请求浏览器执行一个指定的动画。通过 setInterval() 方法可以创建一个定时器，以控制动画的帧率。

setInterval(function() {
  // 清空画布
  ctx.clearRect(0, 0, 500, 500);

  // 绘制风车
  drawWindmill(ctx, 250, 250, 150, angle);

  // 改变角度
  angle += Math.PI / 30;
}, 1000/60);

示例

下面提供两个示例，一个是绘制单个旋转风车，另一个是同时绘制多个旋转风车。

单个旋转风车

可以使用下面的代码绘制单个旋转风车：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>绘制旋转风车动画</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');

      // 绘制叶子
      function drawWindmill(ctx, x, y, l, angle) {
        var h = l / 2;  // 叶子高度
        ctx.fillStyle = '#f00';
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x + l * Math.sin(angle), y + l * Math.cos(angle));
        ctx.lineTo(x + h * Math.sin(angle + 0.3 * Math.PI), y + h * Math.cos(angle + 0.3 * Math.PI));
        ctx.lineTo(x + l * Math.sin(angle + 0.6 * Math.PI), y + l * Math.cos(angle + 0.6 * Math.PI));
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.fill();

        // 绘制轴
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x, y + l / 2);
        ctx.stroke();
      }

      // 绘制主体
      ctx.fillStyle = '#fff';
      ctx.strokeStyle = '#000';
      ctx.beginPath();
      ctx.moveTo(250, 250);
      ctx.lineTo(250, 50);
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(250, 50);
      ctx.lineTo(200, 100);
      ctx.lineTo(300, 100);
      ctx.closePath();
      ctx.fill();

      // 渲染动画
      var angle = 0;
      setInterval(function() {
        // 清空画布
        ctx.clearRect(0, 0, 500, 500);

        // 绘制风车
        drawWindmill(ctx, 250, 250, 150, angle);

        // 改变角度
        angle += Math.PI / 30;
      }, 1000/60);
    </script>
  </body>
</html>

多个旋转风车

可以在上面的代码基础上，稍作修改即可同时绘制多个旋转风车：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>绘制旋转风车动画</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
      // 绘制叶子
      function drawWindmill(ctx, x, y, l, angle) {
        var h = l / 2;  // 叶子高度
        ctx.fillStyle = '#f00';
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x + l * Math.sin(angle), y + l * Math.cos(angle));
        ctx.lineTo(x + h * Math.sin(angle + 0.3 * Math.PI), y + h * Math.cos(angle + 0.3 * Math.PI));
        ctx.lineTo(x + l * Math.sin(angle + 0.6 * Math.PI), y + l * Math.cos(angle + 0.6 * Math.PI));
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.fill();

        // 绘制轴
        ctx.strokeStyle = '#000';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x, y + l / 2);
        ctx.stroke();
      }

      function drawWindmills() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        // 绘制主体
        ctx.fillStyle = '#fff';
        ctx.strokeStyle = '#000';
        ctx.beginPath();
        ctx.moveTo(250, 250);
        ctx.lineTo(250, 50);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(250, 50);
        ctx.lineTo(200, 100);
        ctx.lineTo(300, 100);
        ctx.closePath();
        ctx.fill();

        // 渲染动画
        var angle = 0;
        setInterval(function() {
          // 清空画布
          ctx.clearRect(0, 0, 500, 500);

          // 绘制风车
          drawWindmill(ctx, 150, 150, 100, angle);
          drawWindmill(ctx, 350, 350, 100, -angle);

          // 改变角度
          angle += Math.PI / 30;
        }, 1000/60);
      }

      drawWindmills();
    </script>
  </body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS使用canvas绘制旋转风车动画 - Python技术站