바퀴와 바퀴가 앞으로 이동합니다.

이 코드는 회전하는 바퀴를 표시합니다. 내가 성취하고자하는 것은 바퀴를 복제하고 사본을 다시 배치하고 두 바퀴를 앞으로 움직이는 것입니다. 마치 차의 바퀴처럼 보입니다. 나는 캔버스가 아주 새롭다. http://jsfiddle.net/m1erickson/Yv62X/은 "window.requestAnimFrame"바퀴와 바퀴가 앞으로 이동합니다.

이 유용 폴 아일랜드어로 크로스 브라우저 호환성 덕분에 거기에있다 : 사전 여기

<html> 
    <head> 
    <script type="text/javascript"> 
    addEventListener("load", windowLoaded, false); 

    function windowLoaded() 
    { 
     canvasApp(); 
    } 

    function canvasApp() 
    { 
     var canvas = document.getElementById("canvas01"); 
     var context = canvas.getContext("2d"); 
     var wiel = new Image(); 

     wiel.src = "wiel.png"; 

     setInterval(draw, 25); 

     function draw(width) 
     { 
      context.clearRect(width, 0, 800, 600) 
      context.drawImage(wiel, 0, 0); 
      context.translate(176, 176); 
      context.rotate(1 * 0.1); 
      context.translate(-176, -176); 

     } 
    } 
    </script> 
    </head> 
    <body> 
    <canvas id="canvas01" width="800" height="600"> 
     no support 
    </canvas> 
    </body> 
    </html>

출처

2013-03-04 user2031928

감사는 캔버스에 걸쳐 2 회전 "바퀴"를 애니메이션하는 방법입니다 특색.

RequestAnimFrame()는 현재 동시 애니메이션위한하여 setInterval() 우선하도록

고지 등

애니메이트() 함수는 다음과 같이 통과

가 업데이트 : 위치 & 회전이 필요 산출 애니메이션 프레임입니다.

지우기 :

그리기 그리기 위해 준비하기 위해 캔버스를 지 웁니다 : 실제 도면을

추첨() 함수를 수행하는 무승부() 함수를 호출 : 우리는이 같은 기능을 사용하여 두 바퀴를 그려 - 속성을 바꾸는 것. 이것은 "DRY"의 중요한 프로그래밍 개념을 따릅니다. 자신을 반복하지 마십시오. 단일 함수에서 두 바퀴를 사용하면보다 쉽게 디버깅하고, 더 읽기 쉽고 유지 보수가 쉬운 코드를 만들 수 있습니다.

<!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 canvas=document.getElementById("canvas"); 
     var ctx=canvas.getContext("2d"); 

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

var rotation=0; 
var radius=50; 
var x=50; 
var y=100; 
var direction=1; 

     function animate() { 

      // update 
      rotation+=10; 
      x+=1; 
      if(x-50>canvas.width){ x=0 } 
      // clear 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 

      // draw stuff 
      draw(x,y,rotation,"red"); 
      draw(x+150,y,rotation,"green"); 

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


function draw(x,y,degrees,color){ 
     var radians=degrees*(Math.PI/180); 
     ctx.save(); 
     ctx.beginPath(); 
     ctx.translate(x,y); 
     ctx.rotate(radians); 
     ctx.fillStyle="black"; 
     ctx.strokeStyle="gray"; 
     ctx.arc(0, 0, radius, 0 , 2 * Math.PI, false); 
     ctx.fill(); 
     ctx.stroke(); 
     ctx.beginPath(); 
     ctx.strokeStyle=color; 
     ctx.lineWidth=5; 
     ctx.moveTo(-20,0); 
     ctx.lineTo(+20,0); 
     ctx.stroke(); 
     ctx.restore(); 
} 


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

</head> 

<body> 
    <canvas id="canvas" width=400 height=200></canvas> 
</body> 
</html>

출처

2013-03-04 21:19:21 markE

바퀴와 바퀴가 앞으로 이동합니다.

답변

관련 문제