скрыть или удалить определенную дугу на холсте html5 - PullRequest
Новая
       7

скрыть или удалить определенную дугу на холсте html5

0 голосов
/ 07 сентября 2018

Я хочу реализовать волновой эффект в JavaScript, для этого я использую элемент canvas из HTML 5. Я создал 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);, но она работает только с прямоугольником.

также, дайте мне знать, является ли это хорошим подходом для создания эффекта ряби в канве

Ответы [ 2 ]

0 голосов
/ 07 сентября 2018

Вот гораздо лучший и более плавный волновой эффект, чем тот, который вы ищете:

ПРИМЕЧАНИЕ: запустите его на 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>
0 голосов
/ 07 сентября 2018

Если вы ищете что-то подобное, вы можете сделать это, просто сбросив холст через некоторое время.

Также вы можете запускать элементы, которые будут созданы в определенное время, чтобы эффект показывал их один за другим.

Вот образец 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...