如何使 javascript 形状看起来与图像中相同，以及如何在 Z6F1C25ED1523962FZBBFEE9BE9BE9BE9BE9BE99DEE2 结束后清除 canvas 形状？
[英]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?
问题描述
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.它使用 javascript animation 来渲染三角形，但是我不能让它移动到设置图像的位置，而是移动了太多，如果我调整数字，它就没有很好地到达图像中的三角形，也没有在正确的角度。
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.目前，我需要黑色 animation 三角形与白色图像的角度相同，黑色三角形也必须移动到相同的位置，这意味着三角形必须与图像上的白色完全相同。
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?此外，我在按下按钮时拥有整个 function，那么我如何清除 javascript 形状，然后在调用时，该形状会再次生成相同的 animation？ The remove button has to remove the black triangle, and when "start animation" button is pressed again, the triangle would invoke the StartAnimation();删除按钮必须删除黑色三角形，当再次按下“开始动画”按钮时，三角形会调用 StartAnimation(); function. 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 个解决方案
解决方案1
1 已采纳 2019-10-23 01:39:46
Take a look.看一看。 I simplified your animation logic.我简化了您的 animation 逻辑。 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.我还制作了“重置”按钮，将 initCanvas() 移到StartAnimation() initCanvas()之外，并在按下按钮时调用它。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.