Javascript 三角形动画问题画布翻转旋转
您好，我想知道是否有人可以提供提示或方向的问题，我有一个三角形动画。我有一个不连续的部分动画，它在动画结束时抖动。我在寻找如何进行全方位旋转的建议。如果有人也能帮助你增加多重旋转，那将是令人惊奇的 谢谢Javascript 三角形动画问题画布翻转旋转,javascript,animation,canvas,Javascript,Animation,Canvas,您好，我想知道是否有人可以提供提示或方向的问题，我有一个三角形动画。我有一个不连续的部分动画，它在动画结束时抖动。我在寻找如何进行全方位旋转的建议。如果有人也能帮助你增加多重旋转，那将是令人惊奇的 谢谢 <!DOCTYPE html> <html> <head> <title>Triangle Animation Team B</title> </head> <body> <canvas id="
<!DOCTYPE html>
<html>
<head>
<title>Triangle Animation Team B</title>
</head>
<body>
<canvas id="canvas" width="900" height="600"></canvas>
<script>
function makeTriangle(x1,y1,x2,y2,x3,y3) {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var Array = ['red','green', 'black'];
var color = Array[Math.floor(Math.random() * 3)];
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
ctx.lineTo(x1,y1);
ctx.fillStyle = color;
ctx.fill();
}
}
makeTriangle('400','38','465','76','200','400');
var x = 200;
window.setInterval( function() {
var context = document.getElementById('canvas').getContext('2d');
context.clearRect(0, 0, 1000, 500, 0);
x++;
if (x > 500) x = 300;
makeTriangle('400','38',x,'76','400','200');
}, 20);
</script>
</body>
</html>
三角动画B队
函数makeTriangle（x1，y1，x2，y2，x3，y3）{
var canvas=document.getElementById（'canvas'）；
if（canvas.getContext）{
var ctx=canvas.getContext（'2d'）；
变量数组=['红色'，'绿色'，'黑色']；
var color=Array[Math.floor（Math.random（）*3）]；
ctx.beginPath（）；
ctx.moveTo（x1，y1）；
ctx.lineTo（x2，y2）；
ctx.lineTo（x3，y3）；
ctx.lineTo（x1，y1）；
ctx.fillStyle=颜色；
ctx.fill（）；
}
}
makeTriangle（'400'、'38'、'465'、'76'、'200'、'400'）；
var x=200；
setInterval（函数（）{
var context=document.getElementById（'canvas'）.getContext（'2d'）；
clearRect（0,0,1000,500,0）；
x++；
如果（x>500）x=300；
三角形（'400'、'38'、x、'76'、'400'、'200'）；
}, 20);
Array