Saya memiliki potongan kode yang saya sesuaikan dengan bentuk segitiga. Ini menggunakan animasi javascript untuk merender segitiga, tetapi saya tidak dapat memindahkannya ke lokasi gambar diatur, malah bergerak terlalu banyak, dan jika saya menyesuaikan angka, itu tidak mencapai segitiga pada gambar dengan baik dan tidak di sudut kanan.

Saat ini, saya ingin segitiga animasi hitam berada pada sudut yang sama dengan gambar putih dan segitiga hitam juga harus pindah ke lokasi yang sama, artinya segitiga harus sama persis dengan putih pada gambar.

Juga, saya memiliki seluruh fungsi pada penekanan tombol, jadi bagaimana saya bisa menghapus bentuk javascript dan kemudian ketika dipanggil, bentuknya akan membuat animasi yang sama lagi? Tombol hapus harus menghapus segitiga hitam, dan ketika tombol "mulai animasi" ditekan lagi, segitiga akan memanggil StartAnimation(); fungsi.

Bagaimana saya harus melakukan ini, untuk mencapai hasil yang sempurna?

	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>
2
john_snow5214 23 Oktober 2019, 02:47

1 menjawab

Jawaban Terbaik

Lihatlah. Saya menyederhanakan logika animasi Anda. Saya membuat trapesium besar dengan bentuk yang diinginkan. Itu dimulai di luar layar dan hanya diterjemahkan ke kiri.

Saya juga membuat tombol "reset" Anda, memindahkan initCanvas() di luar StartAnimation() Anda, dan memanggilnya saat tombol ditekan.

Ini mungkin bukan hasil yang Anda inginkan, tetapi saya pikir Anda dapat melanjutkan dengan lebih mudah dari titik ini.

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>
1
Stratubas 23 Oktober 2019, 01:39