隱藏或刪除畫布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.