js动态几何背景

最新推荐文章于 2023-12-18 20:10:29 发布

QmagicianRX

最新推荐文章于 2023-12-18 20:10:29 发布

阅读量177

点赞数

分类专栏： JavaScript+HTML+CSS 文章标签： javascript Html canvas 动态背景几何

本文链接：https://blog.csdn.net/wuxiaoquan_520/article/details/134937064

版权

JavaScript+HTML+CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、Html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
 
<body>
    <div id="container" style="width: 100%; height: 600px">
        <canvas id="canvas"></canvas>
    </div>
</body>
<script>
    // 创建画布和上下文
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

    // 设置画布尺寸
    canvas.width = document.getElementById("container").clientWidth; // window.innerWidth;
    canvas.height = document.getElementById("container").clientHeight; // window.innerHeight;

    // 创建渐变背景色
    const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
    // gradient.addColorStop(0, "#6495ED");
    // gradient.addColorStop(1, "#FFD700");

    // 定义几何图形
    const shapes = [
    {
        x: 450,
        y: 200,
        dx: 1,
        dy: -1,
        radius: 50,
        color: "rgba(255, 127, 80, 0.5)",
        type: "circle",
    }, // 圆形
    {
        x: 300,
        y: 300,
        dx: -2,
        dy: 0.5,
        width: 100,
        height: 100,
        color: "rgba(197, 83, 251, 0.5)",
        type: "rectangle",
    }, // 矩形
    {
        x: 500,
        y: 400,
        dx: 0.5,
        dy: 1.5,
        side: 80,
        color: "rgba(123, 201, 154, 0.5)",
        type: "square",
    }, // 正方形
    {
        x: 200,
        y: 200,
        dx: -1,
        dy: 1,
        radius: 30,
        color: "rgba(228, 246, 147, 0.5)",
        type: "circle",
    }, // 圆形
    {
        x: 700,
        y: 200,
        dx: 2,
        dy: 0.5,
        width: 60,
        height: 100,
        color: "rgba(239, 187, 231, 0.5)",
        type: "rectangle",
    }, // 矩形
    {
        x: 600,
        y: 300,
        dx: -1.5,
        dy: 1,
        side: 70,
        color: "rgba(162, 235, 154, 0.5)",
        type: "square",
    }, // 正方形
    {
        x: 800,
        y: 100,
        dx: -1,
        dy: 0.5,
        side: 40,
        color: "rgba(123, 214, 254, 0.5)",
        type: "triangle",
    }, // 三角形
    ];

    function animate() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制背景色
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 绘制图形
    shapes.forEach((shape) => {
        ctx.fillStyle = shape.color;

        if (shape.type === "circle") {
        ctx.beginPath();
        ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
        ctx.fill();
        ctx.closePath();
        } else if (shape.type === "rectangle") {
        ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
        } else if (shape.type === "square") {
        ctx.beginPath();
        ctx.rect(shape.x, shape.y, shape.side, shape.side);
        ctx.fill();
        ctx.closePath();
        } else if (shape.type === "triangle") {
        ctx.beginPath();
        ctx.moveTo(shape.x, shape.y);
        ctx.lineTo(shape.x + 40, shape.y + 40);
        ctx.lineTo(shape.x - 40, shape.y + 40);
        ctx.fill();
        ctx.closePath();
        }

        // 更新图形位置
        shape.x += shape.dx;
        shape.y += shape.dy;

        // 碰撞检测和反弹
        if (shape.type === "circle") {
        if (
            shape.x + shape.radius > canvas.width ||
            shape.x - shape.radius < 0
        ) {
            shape.dx *= -1;
        }
        if (
            shape.y + shape.radius > canvas.height ||
            shape.y - shape.radius < 0
        ) {
            shape.dy *= -1;
        }
        } else if (shape.type === "rectangle") {
        if (shape.x + shape.width > canvas.width || shape.x < 0) {
            shape.dx *= -1;
        }
        if (shape.y + shape.height > canvas.height || shape.y < 0) {
            shape.dy *= -1;
        }
        } else if (shape.type === "square") {
        if (shape.x + shape.side > canvas.width || shape.x < 0) {
            shape.dx *= -1;
        }
        if (shape.y + shape.side > canvas.height || shape.y < 0) {
            shape.dy *= -1;
        }
        } else if (shape.type === "triangle") {
        if (shape.x + shape.side > canvas.width || shape.x < 0) {
            shape.dx *= -1;
        }
        if (shape.y + shape.side > canvas.height || shape.y < 0) {
            shape.dy *= -1;
        }
        }
    });

    // 递归调用动画
    requestAnimationFrame(animate);
    }

    animate();
</script>
</html>

2、Vue

<template>
  <div id="container">
    <canvas id="canvas"></canvas>
  </div>
</template>
<script>
export default {
  mounted() {
    this.dynamicBackground();
  },
  methods: {
    dynamicBackground() {
      // 创建画布和上下文
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

      // 设置画布尺寸
      canvas.width = document.getElementById("container").clientWidth; // window.innerWidth;
      canvas.height = document.getElementById("container").clientHeight; // window.innerHeight;

      // 创建渐变背景色
      const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
      // gradient.addColorStop(0, "#6495ED");
      // gradient.addColorStop(1, "#FFD700");

      // 定义几何图形
      const shapes = [
        {
          x: 450,
          y: 200,
          dx: 1,
          dy: -1,
          radius: 50,
          color: "rgba(255, 127, 80, 0.5)",
          type: "circle",
        }, // 圆形
        {
          x: 300,
          y: 300,
          dx: -2,
          dy: 0.5,
          width: 100,
          height: 100,
          color: "rgba(197, 83, 251, 0.5)",
          type: "rectangle",
        }, // 矩形
        {
          x: 500,
          y: 400,
          dx: 0.5,
          dy: 1.5,
          side: 80,
          color: "rgba(123, 201, 154, 0.5)",
          type: "square",
        }, // 正方形
        {
          x: 200,
          y: 200,
          dx: -1,
          dy: 1,
          radius: 30,
          color: "rgba(228, 246, 147, 0.5)",
          type: "circle",
        }, // 圆形
        {
          x: 700,
          y: 200,
          dx: 2,
          dy: 0.5,
          width: 60,
          height: 100,
          color: "rgba(239, 187, 231, 0.5)",
          type: "rectangle",
        }, // 矩形
        {
          x: 600,
          y: 300,
          dx: -1.5,
          dy: 1,
          side: 70,
          color: "rgba(162, 235, 154, 0.5)",
          type: "square",
        }, // 正方形
        {
          x: 800,
          y: 100,
          dx: -1,
          dy: 0.5,
          side: 40,
          color: "rgba(123, 214, 254, 0.5)",
          type: "triangle",
        }, // 三角形
      ];

      function animate() {
        // 清除画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制背景色
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 绘制图形
        shapes.forEach((shape) => {
          ctx.fillStyle = shape.color;

          if (shape.type === "circle") {
            ctx.beginPath();
            ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
            ctx.fill();
            ctx.closePath();
          } else if (shape.type === "rectangle") {
            ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
          } else if (shape.type === "square") {
            ctx.beginPath();
            ctx.rect(shape.x, shape.y, shape.side, shape.side);
            ctx.fill();
            ctx.closePath();
          } else if (shape.type === "triangle") {
            ctx.beginPath();
            ctx.moveTo(shape.x, shape.y);
            ctx.lineTo(shape.x + 40, shape.y + 40);
            ctx.lineTo(shape.x - 40, shape.y + 40);
            ctx.fill();
            ctx.closePath();
          }

          // 更新图形位置
          shape.x += shape.dx;
          shape.y += shape.dy;

          // 碰撞检测和反弹
          if (shape.type === "circle") {
            if (
              shape.x + shape.radius > canvas.width ||
              shape.x - shape.radius < 0
            ) {
              shape.dx *= -1;
            }
            if (
              shape.y + shape.radius > canvas.height ||
              shape.y - shape.radius < 0
            ) {
              shape.dy *= -1;
            }
          } else if (shape.type === "rectangle") {
            if (shape.x + shape.width > canvas.width || shape.x < 0) {
              shape.dx *= -1;
            }
            if (shape.y + shape.height > canvas.height || shape.y < 0) {
              shape.dy *= -1;
            }
          } else if (shape.type === "square") {
            if (shape.x + shape.side > canvas.width || shape.x < 0) {
              shape.dx *= -1;
            }
            if (shape.y + shape.side > canvas.height || shape.y < 0) {
              shape.dy *= -1;
            }
          } else if (shape.type === "triangle") {
            if (shape.x + shape.side > canvas.width || shape.x < 0) {
              shape.dx *= -1;
            }
            if (shape.y + shape.side > canvas.height || shape.y < 0) {
              shape.dy *= -1;
            }
          }
        });

        // 递归调用动画
        requestAnimationFrame(animate);
      }

      animate();
    },
  },
};
</script>
<style>
  #container {
    width: 100%;
    height: 600px;
  }
</style>