У меня есть этот фрагмент кода, который я приспособил к форме треугольника. Он использует анимацию 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>1 ответ
Взглянуть. Я упростил логику вашей анимации. Я сделал огромную трапецию желаемой формы. Он начинается за кадром и просто переводится влево.
Я также сделал вашу кнопку "сброса", переместив 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>Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.