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

问题描述 投票：2回答：2

我想在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();

输出enter image description here

如何在此删除特定圈子

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

另外，让我知道这是否是一种在画布上创建连锁效果的好方法

javascript html html5 canvas html5-canvas
2个回答
2
投票

如果你正在寻找这样的东西，你可以在一段时间后重新设置画布。

此外，您可以触发在特定时间创建的元素，以实现逐个显示它们的效果。

这是一个例子

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>
2
投票

这是一个比你寻求的更好，更平滑的涟漪效果：

注意：在CodePen上运行它是因为由于某种原因它在堆栈溢出时不能完全正常工作，但在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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.