Question

我要在JavaScript中实现波纹效果，因为我正在使用HTML 5的canvas元素。我创建了4个圆圈以实现波纹效果，我想一次只显示一个圆圈，这是我的代码

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = window.innerWidth/4;
var canvas = document.getElementById("myCanvas");  
canvas.width = window.innerWidth/2;
canvas.height =  window.innerWidth/2;
ctx.lineWidth = 2; 
ctx.beginPath();
ctx.arc(i, i, i-i/1.5, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(i, i, i-i/2.5, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(i, i, i-i/5, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(i, i, i, 0, 2 * Math.PI);
ctx.stroke();

输出

如何在此处删除特定圈子

有一个函数ctx.clearRect(x, y, width, height);，但它仅适用于矩形。

另外，让我知道这是否是在画布上创建波纹效果的好方法

Answer 1

如果您正在寻找类似的东西，只需在一段时间后重置画布即可。

您还可以触发在特定时间创建的元素，以一种将它们一一显示的效果。

这是一个样本

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i = window.innerWidth/4;
var canvas = document.getElementById("myCanvas");  
canvas.width = window.innerWidth/2;
canvas.height =  window.innerWidth/2;
ctx.lineWidth = 2; 

ctx.beginPath();
ctx.arc(i, i, i-i/1.5, 0, 2 * Math.PI);
ctx.stroke();


window.setTimeout(() => {
  ctx.beginPath();
  ctx.arc(i, i, i-i/2.5, 0, 2 * Math.PI);
  ctx.stroke();
}, 200*1)


window.setTimeout(() => {
  ctx.beginPath();
  ctx.arc(i, i, i-i/5, 0, 2 * Math.PI);
  ctx.stroke();
}, 200*2)

window.setTimeout(() => {
  ctx.beginPath();
  ctx.arc(i, i, i, 0, 2 * Math.PI);
  ctx.stroke();
}, 200*3)

window.setTimeout(() => {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var i = window.innerWidth/4;
  var canvas = document.getElementById("myCanvas");
  canvas.width = window.innerWidth/2;
  canvas.height =  window.innerWidth/2;
}, 200*6)

  <canvas id="myCanvas"></canvas>

Answer 2

这里的涟漪效果要比您寻求的效果好得多且更平滑：

注意：由于某种原因，它在堆栈溢出时不能完全正常运行，但是在HTML文档或CodePen上都可以正常运行

CodePen：https://codepen.io/Undefined_Variable/pen/dqZpzE

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>canvas</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        var canvas = document.body.querySelector("#myCanvas");
        var ctx = canvas.getContext("2d");
        canvas.width = window.innerWidth * 0.98;
        canvas.height = window.innerHeight * 0.97;
        var shapeArr = [];
        window.addEventListener('resize', function () {
            canvas.width = window.innerWidth * 0.98;
            canvas.height = window.innerHeight * 0.98;
            CW = canvas.width;
            CH = canvas.height;
        })
        var CW = canvas.width;
        var CH = canvas.height;
        class circle {
            constructor(centerX, centerY, radius) {
                this.centerX = centerX;
                this.centerY = centerY;
                this.radius = radius;
                this.opacity = 1;
                this.strokeStyle = "rgba(0, 0, 0, " + this.opacity + ")";
            }
            expandCircle() {
                this.radius += 3;
                this.opacity -= 0.015;
                this.strokeStyle = "rgba(0, 0, 0, " + this.opacity + ")";
                if (this.radius > window.innerWidth/4) {
                    this.radius = 0;
                    this.opacity = 1;
                }
            }
        }

        function createCircle(centerX, centerY, radius) {
            shapeArr.push(new circle(centerX, centerY, radius));
        }

        function drawCircle(centerX, centerY, radius, strokeClr) {
            ctx.strokeStyle = strokeClr;
            ctx.save();
            ctx.translate(centerX, centerY);
            ctx.beginPath();
            ctx.arc(0, 0, radius, 0, Math.PI * 2);
            ctx.closePath();
            ctx.stroke();
            ctx.restore()
        }

        createCircle(CW / 2, CH / 2, 0);
        createCircle(CW / 2, CH / 2, 0);
        createCircle(CW / 2, CH / 2, 0);
        
        function firstWave() {
            ctx.clearRect(0, 0, CW, CH);
            drawCircle(shapeArr[0].centerX, shapeArr[0].centerY, shapeArr[0].radius, shapeArr[0].strokeStyle);
            shapeArr[0].expandCircle();
            requestAnimationFrame(firstWave);
        };
        firstWave();

        setTimeout(function secondWave() {
            drawCircle(shapeArr[1].centerX, shapeArr[1].centerY, shapeArr[1].radius, shapeArr[1].strokeStyle);
            shapeArr[1].expandCircle();
            requestAnimationFrame(secondWave);
        }, 250);

        setTimeout(function thirdWave() {
            drawCircle(shapeArr[2].centerX, shapeArr[2].centerY, shapeArr[2].radius, shapeArr[2].strokeStyle);
            shapeArr[2].expandCircle();
            requestAnimationFrame(thirdWave);
        }, 500)
    </script>
</body>
</html>

隐藏或删除画布html5中的特定弧

2 个答案: