隐藏或删除画布html5中的特定弧
[英]hide or remove a specific arc in canvas html5
问题描述
我想在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); 但它仅适用于矩形。
另外，让我知道这是否是在画布上创建波纹效果的好方法
2 个解决方案
解决方案1
2 已采纳 2018-09-07 08:41:37
如果您正在寻找这样的东西，只需在一段时间后重置画布即可。
您也可以触发在特定时间创建的元素，以一种将其一一显示的效果。
这是一个样本
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>
解决方案2
2 2018-09-07 13:00:23
与您寻求的效果相比，这里的波纹效果要好得多且更平滑：
注意：在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>
无法删除HTML5画布弧上的轮廓
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.