Question

您好我想知道是否有人可以提供有关三角形动画问题的提示或方向。我有一个不连续的局部动画，它在动画结束时抖动。我正在寻找建议如何进行完整轮换。如果有人也可以协助如何添加多个旋转，这将是惊人的。

谢谢..

<!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>

三角形动画问题画布翻转旋转

0 个答案: