容器颤动的不同边界半径

容器颤动是一种在计算机图形学中普遍使用的技术，它可以用于创建动态的图形，让图形看起来更加生动、真实。

容器颤动的不同边界半径指的是在一个容器（如一个圆形或矩形）中，其边界颤动的幅度与频率因不同的边界半径而异。

在程序开发中，我们可以利用容器颤动技术为用户带来更好的视觉体验。下面是一个简单的例子，展示了如何使用容器颤动来创建一个动态的圆形：

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

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var radius = 50;
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var boundary = 10;

    function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        var variation = Math.sin(Date.now() / 200) * boundary;
        var currentRadius = radius + variation;
        ctx.beginPath();
        ctx.arc(centerX, centerY, currentRadius, 0, 2 * Math.PI);
        ctx.stroke();
    }

    animate();
</script>

在这个例子中，我们创建了一个圆形，半径为50。我们将圆心的坐标设为画布大小的一半，这样圆形就会居中显示。我们创建了一个名为boundary的变量，表示边界颤动的幅度。我们使用requestAnimationFrame函数创建一个动画循环，每帧执行animate函数。

在animate函数中，我们首先清空了画布。然后，我们计算当前的半径值：我们将Math.sin(Date.now() / 200)的结果与边界颤动的幅度相乘，得到一个在-boudary到boundary之间变化的值。我们将这个值加到原始半径值上，得到一个随时间变化的半径值，最后绘制圆形。

需要注意的是，我们将Math.sin(Date.now() / 200)的结果除以200，这样变化的速度会稍微慢一些，看起来更加自然。如果将200改为一个更小的数字，如100，那么变化速度会更快。

以上就是一个简单的例子，展示了如何使用容器颤动的不同边界半径来创建动态的图形。我们可以根据自己的需求，调整边界半径、变化速度和动画效果，创造出各种奇妙的视觉效果。