hide or remove a specific arc in canvas html5
Question
I want to implement a ripple effect in JavaScript for that I am using a canvas element of HTML 5. I have created 4 circles in order to implement ripple effect I am thinking of showing only one circle at a time here is my code
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();
output
how can I remove a specific circle here
there is a function ctx.clearRect(x, y, width, height); but it works only on rectangle.
also, let me know whether it's a good approach to create a ripple effect in canvas
2 answers
solution1
2 ACCPTED 2018-09-07 08:41:37
If you are looking for something like this, you can do it simply by resetting the canvas after some time.
Also you can trigger the elements to be created at a certain time to make that effect of showing them one by one.
Here is a sample
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, ii/1.5, 0, 2 * Math.PI); ctx.stroke(); window.setTimeout(() => { ctx.beginPath(); ctx.arc(i, i, ii/2.5, 0, 2 * Math.PI); ctx.stroke(); }, 200*1) window.setTimeout(() => { ctx.beginPath(); ctx.arc(i, i, ii/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>
solution2
2 2018-09-07 13:00:23
Here's a much much better and smoother ripple effect than the one you seek:
NOTE: run it on CodePen because for some reason it's not fully functional on stack overflow, but works fine in an HTML document or on CodePen
CodePen: https://codepen.io/Undefined_Variable/pen/dqZpzE
Code:
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.