如何使javascript形状看起来与图像中的形状相同，以及如何在动画结束后清除javascript画布形状

我有一段代码，我把它调整成了三角形。它使用javascript动画来渲染三角形，但我不能让它移动到图像设置的位置，相反，它移动得太多，如果我调整数字，它就不能很好地到达图像中的三角形，并且不在直角上。

目前，我需要黑色动画三角形与白色图像处于相同的角度，黑色三角形也必须移动到相同的位置，这意味着三角形必须与图像上的白色完全相同。

此外，我在按下按钮时拥有整个功能，那么我如何清除javascript形状，然后在调用时，该形状会再次生成相同的动画？移除按钮必须移除黑色三角形，当再次按下"开始动画"按钮时，三角形将调用StartAnimation((；作用

我必须如何做到这一点，才能达到完美的结果？

	function StartAnimation() {
		let
		canvas = document.getElementById('canvas');
		let
		ctx = canvas.getContext('2d');
		let
		initCoor = {
			x1 : ctx.canvas.width,
			y1 : 0,
			x2 : ctx.canvas.width,
			y2 : ctx.canvas.height / 2,
			x3 : ctx.canvas.width,
			y3 : ctx.canvas.height / 2,
			x4 : (ctx.canvas.width - ctx.canvas.width / 5),
			y4 : 0,
		};
		function initCanvas() {
			ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
			ctx.fillStyle = 'transparent';
			ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
		}
		function draw_triangle(x1, y1, x2, y2, x3, y3, x4, y4, color) {
			ctx.save();
			ctx.beginPath();
			ctx.moveTo(x1, y1);
			ctx.lineTo(x1, y1);
			ctx.lineTo(x2, y2);
			ctx.lineTo(x3, y3);
			ctx.lineTo(x4, y4)
			ctx.fillStyle = color;
			ctx.fill();
		}
		function setAnimate() {
			initCoor.x4 <= 0 ? initCoor.x4 = 0 : initCoor.x4 -= 10;
			a = true;
			if (a) {
				if (initCoor.y2 >= ctx.canvas.height
						&& initCoor.y3 >= ctx.canvas.height) {
					initCoor.y2 = ctx.canvas.height;
					initCoor.y3 = ctx.canvas.height;
					if (initCoor.x3 <= 300) {
						initCoor.x3 = 300;
						window.clearInterval(int);
					} else {
						initCoor.x3 -= 10;
					}
				} else {
					initCoor.y2 += 40;
					initCoor.y3 += 40;
				}
				draw_triangle(initCoor.x1, initCoor.y1, initCoor.x2,
						initCoor.y2, initCoor.x3, initCoor.y3, initCoor.x4,
						initCoor.y4, '#000');
			}
		}
		initCanvas();
		draw_triangle(initCoor.x1, initCoor.y1, initCoor.x2, initCoor.y2,
				initCoor.x3, initCoor.y3, initCoor.x4, initCoor.y4, '#000');
		let
		int = window.setInterval(setAnimate, 50);
	}

body {
background-color: lightblue;
}
#canvascontainer
{
	position: absolute;
	width: 360px;
	height: 360px;
z-index: 2;
}
#image
{
	position: absolute;
	width: 360px;
	height: 360px;
z-index: 3;
}
#canvascontainer2
{
	position: absolute;
	width: 360px;
left: 300px;
	height: 360px;
z-index: 2;
}

<html>
<body>
<h2>This is the problem</h2>
<button type="button" onclick="StartAnimation();">Start animation</button> 
<button type="button">Remove shape(how to)</button> 
<div id="image">
<img src="https://cdn1.imggmi.com/uploads/2019/10/23/8148aef0f880ccf35a2a78c083c40383-full.png">
</div>
<div id="canvascontainer">
			<canvas id="canvas" width="360" height="360">
		</canvas>
		</div>
<div id="canvascontainer2">
			<canvas id="canvas2" width="360" height="360">
		</canvas>
		</div>
</body>
</html>

看一看。我简化了你的动画逻辑。我做了一个想要形状的大梯形。它从屏幕上开始，然后被简单地翻译到左边。

我还制作了你的"重置"按钮，将initCanvas()移动到StartAnimation()之外，并在按下按钮时调用它。

这可能不是你想要的结果，但我认为从这一点开始你可以更容易地继续下去。

function initCanvas() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle = 'transparent';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function StartAnimation() {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let initCoor = {
x1: ctx.canvas.width,
y1: 0,
x2: (4 / 3) * ctx.canvas.width,
y2: ctx.canvas.height,
x3: (5 / 3) * ctx.canvas.width,
y3: ctx.canvas.height,
x4: (5 / 3) * ctx.canvas.width,
y4: 0,
};
function draw_triangle(x1, y1, x2, y2, x3, y3, x4, y4, color) {
ctx.save();
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.lineTo(x4, y4)
ctx.fillStyle = color;
ctx.fill();
}
function setAnimate() {
initCoor.x1 -= 10;
initCoor.x2 -= 10;
initCoor.x3 -= 10;
initCoor.x4 -= 10;
if (initCoor.x2 <= 100) { window.clearInterval(int); }
draw_triangle(initCoor.x1, initCoor.y1, initCoor.x2,
initCoor.y2, initCoor.x3, initCoor.y3, initCoor.x4,
initCoor.y4, '#000');
}
initCanvas();
draw_triangle(initCoor.x1, initCoor.y1, initCoor.x2, initCoor.y2,
initCoor.x3, initCoor.y3, initCoor.x4, initCoor.y4, '#000');
let int = window.setInterval(setAnimate, 50);
}

body {
background-color: lightblue;
}
#canvascontainer
{
	position: absolute;
	width: 360px;
	height: 360px;
z-index: 2;
}
#image
{
	position: absolute;
	width: 360px;
	height: 360px;
z-index: 3;
}
#canvascontainer2
{
	position: absolute;
	width: 360px;
left: 300px;
	height: 360px;
z-index: 2;
}

<html>
<body>
<h2>This is the problem</h2>
<button type="button" onclick="StartAnimation();">Start animation</button> 
<button type="button" onclick="initCanvas();">Remove black shape</button> 
<div id="image">
<img src="https://cdn1.imggmi.com/uploads/2019/10/23/8148aef0f880ccf35a2a78c083c40383-full.png">
</div>
<div id="canvascontainer">
			<canvas id="canvas" width="360" height="360">
		</canvas>
		</div>
<div id="canvascontainer2">
			<canvas id="canvas2" width="360" height="360">
		</canvas>
		</div>
</body>
</html>

相关内容

最新更新

热门标签：