How to make the javascript shape look the same as in the image and how to clear a javascript canvas shape after animation has ended?
Question
I have this piece of code that I adjusted to a triangle shape. It uses javascript animation to render the triangle, but I can not have it move to the location the image is set, it instead moves too much, and if I adjust the numbers, it does not reach the triangle in the image well and is not in the right angle.
At the moment, I need the black animation triangle to be on the same angle as the white image and the black triangle also has to move to the same location, meaning the triangle has to be exactly the same as the white on the image.
Also, I have the whole function on a button press, so how could I clear the javascript shape and then when invoked, the shape would make the same animation again? The remove button has to remove the black triangle, and when "start animation" button is pressed again, the triangle would invoke the StartAnimation(); function.
How must I do this, to reach the perfect result?
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>1 answers
solution1
1 ACCPTED 2019-10-23 01:39:46
Take a look. I simplified your animation logic. I made a huge trapezium of the desired shape. It starts off-screen and it is simply translated to the left.
I also made your "reset" button, moving the initCanvas() outside your StartAnimation() , and calling it when the button is pressed.
It may not be exactly your desired result, but I think you can continue more easily from this point.
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>
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.