我将这段代码调整为三角形。它使用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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句