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

Question

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

Bla*_*ine 6 canvas draw radial jquery-animate

好的你好.

我决定开始使用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>

Run Code Online (Sandbox Code Playgroud)

这是我想要实现的小提琴http://jsfiddle.net/oskar/Aapn8/.我不会对"弹跳"效果感到困惑.

但我基本上希望它在页面加载时绘制并停在所需的弧形角度这里是我迄今为止创建的小提琴.

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

谢谢

Answer 1

Lok*_*tar 19

现场演示

// 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();

Run Code Online (Sandbox Code Playgroud)

基本上我使用了你发布的演示链接中的相同公式.然后我添加了一个动画函数,调用时会更新圆圈,直到达到所需的结束百分比.

requestAnimationFrame不断调用动画,这是使用canvas进行任何类型动画的首选方式.每次animate调用时,当前百分比增加1,然后用于重绘弧.

归档时间：	12 年，5 月前
查看次数：	28324 次
最近记录：	12 年，5 月前