别再用图片啦！SVG教你更酷的裂变方块新玩法

2023-10-30 09:28:01

裂变方块？有什么作用？

SVG裂变方块是一种简单的canvas动画效果，它使用SVG来创建具有不同形状的方块，然后使它们分裂成更小的方块，直至达到最终的形状。这种效果可以用在各种各样的项目中，如游戏、演示文稿和网站。

如何用SVG来实现裂变的方块？

首先，您需要创建一个新的canvas元素。

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

接下来的，您需要创建一个新的SVG元素。

<svg id="mySVG" width="500" height="500">
  <rect id="myRect" width="100" height="100" fill="blue" />
</svg>

将SVG元素添加到canvas元素中。

document.getElementById("myCanvas").appendChild(document.getElementById("mySVG"));

创建一个新的脚本元素。

<script>
  var canvas = document.getElementById("myCanvas");
  var svg = document.getElementById("mySVG");
  var rect = document.getElementById("myRect");

  var ctx = canvas.getContext("2d");

  var width = canvas.width;
  var height = canvas.height;

  var rectWidth = rect.width;
  var rectHeight = rect.height;

  var x = 0;
  var y = 0;

  function draw() {
    ctx.clearRect(0, 0, width, height);

    ctx.drawImage(svg, x, y, rectWidth, rectHeight);

    if (x < width - rectWidth) {
      x += 1;
    } else {
      x = 0;
    }

    if (y < height - rectHeight) {
      y += 1;
    } else {
      y = 0;
    }

    requestAnimationFrame(draw);
  }

  draw();
</script>