HTML 5 2D 캔버스 애니메이션 지우기

나는 다양한 가이드를 따라 왔고 간단한 애니메이션을위한 기본 코드를 가지고있다. 그러나 나에게있어서 캔버스가 올바르게 리셋되지는 않는다. clearRect() 함수는 완벽하게 작동하지만 나중에 다시 원호를 그릴 때 원의 단일 세그먼트를 그리는 대신 모든 경로의 합을 다시 그립니다.HTML 5 2D 캔버스 애니메이션 지우기

누군가 내가 여기서 잘못하고있는 것을 말해 줄 수 있습니까? 나는 그것이 간단한 해결책이라는 것을 알고 있습니다! 한마디로 그냥 원을 그리는 대신 회전 세그먼트의 종류를 생산하기 위해 아래의 테스트 페이지를 싶습니다

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 

</head> 
<body> 
<span id="degrees_output" style="display:block;width:60px"></span> 
<button onclick="continue_animation=false;">Stop</button> 
<canvas id="myCanvas" width="578" height="200"></canvas> 
<script> 
    var degrees = 0; 
    var continue_animation = true; 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var output = document.getElementById('degrees_output');  

    window.requestAnimFrame = (function(callback) { 
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
    function(callback) { 
     window.setTimeout(callback, 1000/60); 
    }; 
    })(); 

    function animate() {   
    // update 
    output.innerHTML = degrees; 

    var radians = (degrees/180) * Math.PI; 

    if (degrees >= 360) 
     degrees = 0; 
    else 
     degrees += 1; 

    // clear 
    if (degrees % 20 == 0) 
    {   
     context.clearRect(0, 0, 578, 200); 

    } 

    context.beginPath(); 

    // setup the line style  
    context.strokeStyle = '#fa00ff'; 
    context.lineWidth = 5; 
    context.lineCap = 'round'; 


    context.arc(50, 50, 20, 0, radians, false); 

    // colour the path 
    context.stroke(); 

    context.closePath();     


    // request new frame 
    requestAnimFrame(function() { 
     if (continue_animation) 
      animate(); 
    }); 
    } 
    animate(); 

</script>

출처

2013-04-15 Olly Lennox

당신이 고정 된 길이 아크 서클 주위를 청소하려면, 당신에게 '

context.arc(50, 50, 20, startRadians, radians, false);

및 startRadians 그냥 "라디안"값 뒤에 어떤 각도가 될 수 있습니다 : LL이처럼 context.arc의 시작과 끝 각도를 모두 지정하려는

var startRadians= (degrees-45) * Math.PI/180;

하고, 예, 새로운 위치에 호를 그리기 전에 (적어도 이전 호) 캔버스을 취소해야합니다

여기

context.clearRect(0,0,canvas.width,canvas.height);

입니다 코드와 바이올린 : http://jsfiddle.net/m1erickson/VFhzX/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var degrees = 0; 
    var continue_animation = true; 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var output = document.getElementById('degrees_output');  

    window.requestAnimFrame = (function(callback) { 
     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
     function(callback) { 
     window.setTimeout(callback, 1000/60); 
     }; 
    })(); 

    function animate() {   
     // update 
     output.innerHTML = degrees; 

     var radians = (degrees/180) * Math.PI; 
     var startRadians= (degrees-45) * Math.PI/180; 

     if (degrees >= 360) 
      degrees = 0; 
     else 
      degrees += 1; 

     // clear 
     if (degrees % 20 == 0) 
     {   
      context.clearRect(0, 0, 578, 200); 

     } 

     context.clearRect(0,0,canvas.width,canvas.height); 

     context.beginPath(); 

     // setup the line style  
     context.strokeStyle = '#fa00ff'; 
     context.lineWidth = 5; 
     context.lineCap = 'round'; 


     context.arc(50, 50, 20, startRadians, radians, false); 

     // colour the path 
     context.stroke(); 

     context.closePath();     


     // request new frame 
     requestAnimFrame(function() { 
      if (continue_animation) 
       animate(); 
     }); 
    } 
    animate(); 



}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <span id="degrees_output" style="display:block;width:60px"></span> 
    <button onclick="continue_animation=false;">Stop</button> 
    <canvas id="myCanvas" width="578" height="200"></canvas> 
</body> 
</html>

출처

2013-04-15 18:30:41 markE

HTML 5 2D 캔버스 애니메이션 지우기

답변

관련 문제