0
내 애니메이션의 캔버스와 webkitrequestAnimation 프레임을 사용하고 있습니다. 그러나 애니메이션이 순식간에 부드럽지 않습니다. 너무 빨라서 어떤 애니메이션도 볼 수 없습니다. 어떻게 애니메이션을 부드럽게 만드나요? 예상대로 라인 (24)에 구문 오류에서 떨어져 나를 위해 작동html5 애니메이션을 어떻게 부드럽게 만드나요?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Wave 2</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
angle = 0,
range = 50,
centerY = canvas.height/2,
xspeed = 1,
yspeed = 0.05,
xpos = 0,
ypos = centerY;
context.lineWidth = 2;
(function drawFrame() {
window.webkitrequestAnimationFrame(drawFrame, canvas);
context.beginPath();
context.moveTo(xpos, ypos);
//Calculate the new position.
xpos += xspeed;
angle += yspeed;
ypos = centerY + Math.sin(angle) * range;
context.lineTo(xpos, ypos);
context.stroke();
}());
};
</script>
</body>
</html>