动画一个Canvas圆，以便在加载时绘制

OK。

我已经决定开始使用HTML画布的一个小项目，我有。

还没有真正的开始。我只是在学习画布的基础知识，我想动画一个圆圈

<!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/

谢谢

现场演示

// 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，然后用于重新绘制电弧。

三步走:

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.

代码中没有任何函数。如果你不知道如何创建和使用函数+什么是全局变量最好先阅读相关教程但无论如何，我还是想给你们举个例子:)

相关内容

最新更新

热门标签：