Question

好的你好。

我决定开始使用HTML canvas来完成我的小项目。

还没有真正的开始。我只是学习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/

由于

Answer 1

<强> Live Demo

// 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时，当前百分比增加1，然后用于重绘弧。

Answer 2

三个步骤：

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.

您的代码中没有任何功能。如果您不知道如何创建函数并使用它们+什么是全局变量，最好首先阅读有关该函数的教程，但无论如何我会试着让您成为一个例子：）

动画画布圆圈以在加载时绘制

2 个答案: