如何為 javascript 三角形設置動畫

Question

我有這個三角碼，但它似乎不起作用。 代碼應該類似於此圖像中的行為，但它僅適用於 Chrome 平台的編碼。

這背后的原因可能是什么？ 這是一個小提琴。

function createTriangle(x1,y1,x2,y2,x3,y3,fillcolor,strokecolor,stroke) {
  var triangle = new Object();
  triangle.x1 =x1;
  triangle.y1 = y1;
  triangle.x2 = x2;
  triangle.y2 = y2;
  triangle.x3 = x3;
  triangle.y3 = y3;
  triangle.fillcolor = fillcolor;
  triangle.draw = function() {
    draw.triangle(this.x1, this.y1, this.x2, this.y2, this.x3, this.y3, this.fillcolor,     this.strokecolor, this.stroke);
  }
  return triangle; 
}
var triangle = createTriangle(350,100,360,100,360,360,'blue','black',6);
triangle.draw();
triangle.pointRight = true;

function moveTriangle() {
  if (triangle.pointRight){
    triangle.x1 += 2;
  } else {
    triangle.x1 -= 2;
  }
  if(triangle.x1 >= 300) {
    triangle.pointRight = false;
  } else if (triangle.x1 <= 250) {
    triangle.pointRight = true;
  }
   triangle.draw();
  setTimeout('moveTriangle();', 20)
}
moveTriangle();

Answer 1

我創建了一個簡單的 animation 三角形到矩形，它並不完美，因為我沒有太多時間，但也許它會對你有所幫助：

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 = 'rgba(0,0,0,1)';
  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;

  if(initCoor.y2>=ctx.canvas.height && initCoor.y3>=ctx.canvas.height){
   initCoor.y2 = ctx.canvas.height;
   initCoor.y3 = ctx.canvas.height;
   if(initCoor.x3 <=0){
     initCoor.x3=0
     window.clearInterval(int);
   }else{
    initCoor.x3-=10
   };
  } else {
    initCoor.y2+=10;
    initCoor.y3+=10;
  }
draw_triangle(initCoor.x1,initCoor.y1,initCoor.x2,initCoor.y2,initCoor.x3,initCoor.y3,initCoor.x4,initCoor.y4, '#CCC');
}

和工作小提琴： https://jsfiddle.net/c7h5n34z/1/