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持续调用，这是使用画布执行任何类型动画的首选方式。每次animate调用当前百分比增加一，然后用于重新绘制圆弧。

于 2013-03-28T22:24:50.503 回答
0

三个步骤： 

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 回答