6

こんにちは。

私が持っている小さなプロジェクトに HTML キャンバスを使い始めることにしました。

まだ本当のスタートはありません。Canvas の基本を学んでいて、円をアニメートしたい

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>title</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        background: #222;
      }

     </style>
  <link rel="stylesheet" href="style.css" type="text/css">
 </head>
<body>
<canvas id="myCanvas" width="578" height="250"></canvas>

    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 75;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 3.2 * Math.PI;
      var counterClockwise = false;
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 15;
      // line color
      context.strokeStyle = 'black';
      context.stroke();
    </script>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
  <script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"></script>
 </body>
</html>

これは、私が達成しようとしていることのフィドルhttp://jsfiddle.net/oskar/Aapn8/です。私は「バウンス」効果に悩まされていません。

しかし、私は基本的に、ページの読み込み時に描画し、希望する円弧の角度で停止するようにしたいと考えています。これまでに作成したもののフィドルです。

http://jsfiddle.net/skerwin/uhVj6/

ありがとう

4

2 に答える 2

20

ライブデモ

// requestAnimationFrame Shim
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();



var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var x = canvas.width / 2;
 var y = canvas.height / 2;
 var radius = 75;
 var endPercent = 85;
 var curPerc = 0;
 var counterClockwise = false;
 var circ = Math.PI * 2;
 var quart = Math.PI / 2;

 context.lineWidth = 10;
 context.strokeStyle = '#ad2323';
 context.shadowOffsetX = 0;
 context.shadowOffsetY = 0;
 context.shadowBlur = 10;
 context.shadowColor = '#656565';


 function animate(current) {
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.beginPath();
     context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
     context.stroke();
     curPerc++;
     if (curPerc < endPercent) {
         requestAnimationFrame(function () {
             animate(curPerc / 100)
         });
     }
 }

 animate();

基本的に、投稿したデモリンクと同じ式を使用しました。次に、呼び出されると円が目的の終了パーセントに達するまで円を更新するアニメーション関数を追加しました。

アニメーションは、 requestAnimationFrameによって継続的に呼び出されます。これは、canvas であらゆる種類のアニメーションを実行する場合に推奨される方法です。が呼び出されるたびanimateに、現在のパーセントが 1 ずつ増加し、それを使用して円弧が再描画されます。

于 2013-03-28T22:24:50.503 に答える
0

3 つのステップ: 

1) Make an "init" function which will assign the variables (they aren't in any   
function).  
2) Then use requestAnimationFrame, or setInterval with your   
drawing function you will create.  
3) In this "drawing/updating" function you're going to   
write your code to do the maths and then just animate the updated circle.

コードに関数がありません。関数を作成して使用する方法とグローバル変数とは何かがわからない場合は、最初にそれに関するチュートリアルを読むことをお勧めしますが、とにかく例を作成しようとします:)

于 2013-03-28T21:35:32.780 に答える