代码之家 › 专栏 › 技术社区 › Mohd Maaz Giri

在画布html5中隐藏或移除特定弧

html5-canvas canvas html5 html javascript

Mohd Maaz Giri · 技术社区 · 6 年前

我想在JavaScript中实现一个连锁反应,因为我使用的是html5的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); 但它只适用于矩形。

2 回复 | 直到 6 年前

Alejandro Vales user1768079 6 年前

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

您还可以在某个特定时间触发要创建的元素,使其具有逐个显示的效果。

这是一个样本

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>

Saif Taher 6 年前

注意:在CodePen上运行它,因为由于某些原因,它在堆栈溢出上没有完全的功能,但是在HTML文档或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>